Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Modal dialogs
Overlays

Modal dialogs

Modal dialogs patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Modal

Native dialog commands provide opening, closing, Escape and focus behavior in supporting browsers.

Live preview

A native modal

This native dialog supports Escape, keyboard focus containment and return to the opener. Connect application actions separately.

View HTML / PlaygroundHTML source
example.htmlHTML
<button type="button" class="sl-btn" commandfor="ref-modal" command="show-modal">
  Open dialog
</button>
<dialog class="sl-dialog" id="ref-modal" aria-labelledby="ref-modal-title">
  <div class="sl-dialog__head">
    <h3 id="ref-modal-title" class="sl-text-xl">A native modal</h3>
    <button
      class="sl-close"
      type="button"
      commandfor="ref-modal"
      command="close"
      aria-label="Close A native modal"
    >
      ×
    </button>
  </div>
  <div class="sl-stack">
    <p>
      This native dialog supports Escape, keyboard focus containment and return to the
      opener. Connect application actions separately.
    </p>
    <button class="sl-btn" type="button" commandfor="ref-modal" command="close">
      Close example
    </button>
  </div>
</dialog>
HTML source · enable JavaScript for the playground26 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.