如何創建僅CSS的動畫模態窗口？

使用隱藏的複選框和:checked 偽類控制模態框狀態；2. 通過label 關聯實現點擊打開和關閉；3. 利用CSS transition 或@keyframes 實現淡入縮放動畫；4. 設置pointer-events 確保點擊遮罩可關閉；5. 無法純CSS 實現Esc 鍵關閉。該方法無需JavaScript，輕量且兼容現代瀏覽器，適合簡單項目或學習用途。

Creating a CSS-only animated modal window is totally doable using just HTML and CSS—no JavaScript required. The trick lies in using the :target selector or checkboxes with :checked to control visibility, combined with CSS transitions or animations for smooth effects.

Here's how to build one step by step:

✅ 1. Use a Checkbox Hack or :target for Toggle Control

Since we can't use JavaScript, we need a way to "remember" the modal's state. Two common methods:

• :target – Uses URL fragment identifiers (eg, #modal )
• Checkbox hack – Hides a checkbox and styles its :checked state

We'll use the checkbox method because it allows smoother close-on-overlay-click behavior and better control.

HTML Structure:

 <!-- Hidden checkbox to control modal state -->
<input type="checkbox" id="modal-toggle" class="modal-toggle">
<label for="modal-toggle" class="modal-open-btn">Open Modal</label>

<!-- Modal -->
<div class="modal">
  <label for="modal-toggle" class="modal-overlay"></label>
  <div class="modal-content">
    <label for="modal-toggle" class="modal-close">&times;</label>
    <h2>Modal Title</h2>
    <p>This is your animated modal content.</p>
  </div>
</div>

The checkbox acts as a toggle. Clicking the label ( modal-open-btn ) or close elements toggles the checkbox, which we style conditionally.

✅ 2. Style the Modal with CSS Animation

Now apply styles to make it animated and visually appealing.

Core CSS:

 /* Hide the checkbox */
.modal-toggle {
  display: none;
}

/* Modal base: hidden by default */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Modal overlay (background dim) */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal content box */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 500px;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #aaa;
}

.modal-close:hover {
  color: #000;
}

/* Show modal when checkbox is checked */
.modal-toggle:checked .modal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-toggle:checked .modal .modal-content {
  transform: translate(-50%, -50%) scale(1);
}

The pointer-events: none on the modal and pointer-events: auto when active ensure clicks on the overlay close the modal (via the label).

✅ 3. Add Entrance and Exit Animations

Want more flair? Replace transition with a full @keyframes animation.

Example: Fade & Scale Animation

 @keyframes modal-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes modal-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* Apply animation only when opening */
.modal-toggle:checked .modal .modal-content {
  animation: modal-in 0.3s forwards;
}

/* Optional: animate out – tricky without JS, but works on close if you reverse */
.modal-content {
  animation: none;
}

Note: Since CSS can't reverse animations easily on uncheck, using transition is often smoother than trying to animate the close.

✅ 4. Optional: Close on Overlay or Esc (Partial)

• Overlay click : Already handled via <label for="modal-toggle" class="modal-overlay"></label>
• Esc key : Can't be handled in pure CSS. You'd need JS for keyboard support.

✅ Summary: Key Points

• Use a hidden checkbox and :checked to simulate state.
• Use label elements to trigger open/close.
• Animate with transition or @keyframes .
• Use pointer-events to control click behavior on the backdrop.
• No keyboard support (Esc) without JavaScript.

This method is lightweight, accessible for basic use, and works across modern browsers. It's perfect for simple projects or learning CSS logic.

Basically just link the checkbox to labels and animate the appearance. Not magic—just clever CSS.

以上是如何創建僅CSS的動畫模態窗口？的詳細內容。更多資訊請關注PHP中文網其他相關文章！