Modal — Vanilla

Modal dialog with vanilla HTML + JS. Same BEM and sizes as Astro/Svelte. Ensure Rizzo CSS is loaded.

Modal

Dialog with overlay, focus trap, and optional sizes (sm, md, lg). Same structure as Astro and Svelte.

Modal sizes

Small (24rem), medium (32rem), large (48rem). Click to open:

Live examples

Standard example

Live example

HTML

Use modal__overlay (sibling) and modal with modal__header, modal__body, modal__footer. Size: modal--sm, modal--md, modal--lg.

html html 
<button type="button" class="btn btn-primary" id="open-modal-btn">Open modal</button>

<!-- Overlay (sibling to .modal) -->
<div class="modal__overlay" id="demo-overlay" aria-hidden="true"></div>

<!-- Dialog: add modal--sm | modal--md | modal--lg for size -->
<div class="modal modal--md" id="demo-modal" role="dialog" aria-modal="true" aria-labelledby="demo-modal-title" aria-hidden="true">
  <div class="modal__header">
    <h2 class="modal__title" id="demo-modal-title">Modal title</h2>
    <button type="button" class="modal__close" aria-label="Close modal">×</button>
  </div>
  <div class="modal__body">
    <p>Modal body. Close via button, overlay click, or Escape.</p>
  </div>
  <div class="modal__footer">
    <button type="button" class="btn">Cancel</button>
    <button type="button" class="btn btn-primary">Confirm</button>
  </div>
</div>

JavaScript

javascript javascript 
(function() {
  var openBtn = document.getElementById('open-modal-btn');
  var overlay = document.getElementById('demo-overlay');
  var modal = document.getElementById('demo-modal');
  if (!openBtn || !overlay || !modal) return;

  function openModal() {
    overlay.setAttribute('aria-hidden', 'false');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
  }
  function closeModal() {
    overlay.setAttribute('aria-hidden', 'true');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  }

  openBtn.addEventListener('click', openModal);
  overlay.addEventListener('click', closeModal);
  modal.querySelector('.modal__close').addEventListener('click', closeModal);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') closeModal();
  });
})();

Astro / Svelte: Astro · Svelte