Modal

Preview

Click the button below to open the modal:

Usage

<!-- Backdrop -->
<div class="glass-modal-backdrop" id="my-modal">
  <!-- Modal -->
  <div class="glass-modal">
    <button class="close-button">✕</button>
    <h3>Modal Title</h3>
    <p>Modal body content.</p>
    <button>Close</button>
  </div>
</div>

Toggle with JavaScript:

// Open
document.getElementById('my-modal').classList.add('active');

// Close
document.getElementById('my-modal').classList.remove('active');

Or use CSS :target (no JS required):

<a href="#my-modal">Open Modal</a>

<div class="glass-modal-backdrop" id="my-modal">
  <div class="glass-modal">
    <a href="#" class="close-button">✕</a>
    <p>Content</p>
  </div>
</div>

Structure

Element / Class	Purpose
.glass-modal-backdrop	Full-screen overlay with blurred background
.glass-modal	Centered dialog box with heavy frost
.close-button	Absolute-positioned circular close button (top-right)

Behavior

• Closed: Backdrop has opacity: 0 and pointer-events: none
• Open (.active or :target): Backdrop fades in, modal scales from 0.9 to 1.0
• Backdrop has z-index: 1000
• Modal uses --glass-blur-thick (40px) for heavy frosting
• Modal max-width: 500px, border-radius: var(--glass-radius-xl) (32px)