Overlays modaloverlayglass

Glass Modal

A focused overlay window with a premium glassmorphism blur and smooth entrance animation.

×

Confirm Action

Are you sure you want to proceed with this sensitive operation?

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { OverlayModal, GlassButton } from 'astro-component-kit';
---

<OverlayModal>
  <div class="modal-content">
    <h3>Project Created</h3>
    <p>Your new workspace is ready to use.</p>
    <div class="flex-end mt-6">
      <GlassButton size="sm">Go to Dashboard</GlassButton>
    </div>
  </div>
</OverlayModal>
--- import { OverlayModal, GlassButton } from 'astro-component-kit'; --- <OverlayModal> <div class="modal-content"> <h3>Project Created</h3> <p>Your new workspace is ready to use.</p> <div class="flex-end mt-6"> <GlassButton size="sm">Go to Dashboard</GlassButton> </div> </div> </OverlayModal>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassModal.astro and paste the following code:

astro 
---
---
<div class="modal-overlay">
  <div class="modal-card anim-scale-up">
    <div class="modal-close">×</div>
    <h3>Confirm Action</h3>
    <p>Are you sure you want to proceed with this sensitive operation?</p>
    <div class="modal-actions">
      <button class="cancel">Cancel</button>
      <button class="confirm">Continue</button>
    </div>
  </div>
</div>
<style>
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; }
  .modal-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); position: relative; }
  .modal-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: #94a3b8; font-size: 1.5rem; }
  h3 { margin: 0 0 1rem; color: #fff; }
  p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
  button { padding: 0.6rem 1.25rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
  .cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
  .confirm { background: #6366f1; color: #fff; }
</style>
--- --- <div class="modal-overlay"> <div class="modal-card anim-scale-up"> <div class="modal-close">×</div> <h3>Confirm Action</h3> <p>Are you sure you want to proceed with this sensitive operation?</p> <div class="modal-actions"> <button class="cancel">Cancel</button> <button class="confirm">Continue</button> </div> </div> </div> <style> .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; } .modal-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); position: relative; } .modal-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: #94a3b8; font-size: 1.5rem; } h3 { margin: 0 0 1rem; color: #fff; } p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; } .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; } button { padding: 0.6rem 1.25rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; } .cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); } .confirm { background: #6366f1; color: #fff; } </style>

Quick Info

Category
Overlays
Filename
GlassModal.astro
Dependencies
None — pure Astro + CSS
Tags
modaloverlayglass