Modal

Native top-layer dialog with a backdrop.

Source: src/stylus/components/modal.styl

Open and close without script

Open with showModal(), close with a <form method="dialog"> — no event handler is involved in closing.

This renders in the browser's top layer.

<button type="button" class="button primary sm" data-dialog="doc-modal">Launch modal</button>
<dialog id="doc-modal" class="modal" aria-labelledby="doc-modal-title">
  <form method="dialog">
    <div class="modal-header"><h3 id="doc-modal-title">Deploy to production</h3></div>
    <p>This renders in the browser's top layer.</p>
    <div class="modal-footer">
      <button type="submit" class="button secondary sm">Cancel</button>
      <button type="submit" class="button primary sm">Deploy</button>
    </div>
  </form>
</dialog>