Modals

A modal is a native <dialog class="modal">. The browser handles the focus trap, the top layer and Esc; the bundled script adds a close button, backdrop-click, groups and events. No library, no inline handlers.

Keyboard

Markup

• data-modal-target="id" on any button opens that dialog; data-modal-close on anything inside closes it. Both work under a CSP. From your own code, toggleModal('id') is global.
• .modal-content is the scrolling body; .modal-header / .modal-footer stay pinned and visible (the dialog is a flex column).
• closedby="any" gives native click-outside-to-close where supported; the script covers the rest.
• The dialog is its own surface at the .bg-soft level — don't add a .bg-* class. Override --jf-color-surface on .modal for a different fill.

Modal title

The body scrolls when it's taller than the viewport; the header and footer stay put. Press Esc, click the backdrop, or use the close button.

Jellyfish have no brain, heart, bones or eyes — a decentralised nerve net is enough to hunt, flee and mate. This paragraph, the image above and the next few are here purely to make the panel tall enough to demonstrate the scroll.

Almost entirely water by mass, which is part of why they fossilise so rarely despite being older than trees.

A lion's mane jellyfish can trail tentacles longer than a blue whale is long.

Cancel Confirm

Groups

Give modals a shared data-modalgroup="name" and the script adds prev / next arrows and wires the arrow keys. Stepping between grouped modals is a hard cut — the open / close animation only runs for a standalone modal. A nested modal (opened from inside another, outside a group) isn't supported: close one first.

Animation

Opening slides up + scales in over --jf-transition (@starting-style); closing is a slower opacity dissolve (--jf-duration-slow) held with allow-discrete — the fade-out needs the overlay property, so Firefox cuts straight to closed while Chromium and Safari fade. prefers-reduced-motion makes both instant. Retune by redeclaring --jf-transition / --jf-duration-slow on .modal.

Events

jfModalOpened and jfModalClosed fire on document however the modal opened or closed.

    document.addEventListener("jfModalOpened", (e) => {
      e.detail; // { newModalId, prevModalId, nextModalId }
    });
    document.addEventListener("jfModalClosed", (e) => {
      e.detail; // { closedModalId }
    });
  

Every open and close also pushes to window.dataLayer (GTM), if it exists — a different, richer shape than the event detail above, not a copy of it:

    // on open
    { event: "modalOpened", modalId: "#demo", modalTitle: "Modal title" }
    // on close
    { event: "modalClosed", modalId: "#demo", modalTitle: "Modal title", timeOpen: 12.4 }
  

modalId is #-prefixed; modalTitle resolves to a data-title on the <dialog>, then its first heading, then its first non-empty text. timeOpen (seconds, close only) has no equivalent on the jfModalClosed event above — it's dataLayer-only.