Modal

A modal is a centered overlay dialog that interrupts the page to demand focused attention. FlickUI's modal is built on the native <dialog> element rather than a hand-rolled overlay <div>, so it gets the browser's built-in modal semantics for free: focus trapping, a ::backdrop, top-layer stacking, and native Escape-to-close.

This is flickui.

<button type="button" class="btn btn-primary toggle-target" aria-controls="hello">
  <span class="btn-label">Open modal</span>
</button>

<dialog class="modal" id="hello" aria-labelledby="hello-title">
  <div class="modal-panel">
    <header class="modal-header">
      <h2 class="modal-title" id="hello-title">Hello!</h2>
      <button type="button" class="modal-close action-close" aria-label="Close">✕</button>
    </header>
    <div class="modal-body"><p>This is flickui.</p></div>
    <footer class="modal-footer">
      <button type="button" class="btn action-cancel"><span class="btn-label">Cancel</span></button>
      <button type="button" class="btn btn-primary action-confirm"><span class="btn-label">Confirm</span></button>
    </footer>
  </div>
</dialog>