html-native-modal

Dead simple modal library based on the HTML 5.2 native <dialog>.

• APIs are based on the HTMLDialogElement spec.
  (See also HTMLDialogElement - Web APIs | MDN)
  • <dialog> tag
  • dialogElement.showModal() method
  • dialogElement.close() method
  • cancel event
• No dependencies. No polyfills. Works with any framework.
• Tiny. JS < 100 lines, CSS < 100 lines.
• Works in IE 11.

Demo

Preact + TypeScript (TSX) example on CodeSandbox

Nested modals example on CodePen

Installation

npm

npm i html-native-modal

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/html-native-modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Download

• html-native-modal.min.css
• html-native-modal.min.js

Usage

<link rel="stylesheet" href="html-native-modal.min.css">
<script src="html-native-modal.min.js"></script>

<button onclick="this.nextElementSibling.showModal()">Open</button>

<dialog style="width: 480px; padding: 16px 32px;">
  <button style="float: right;" onclick="this.parentElement.close()">Close</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
</dialog>

Run on CodePen

Canceling Canceling

By default, pressing the Esc key or clicking on the background will close the dialog.
To disable this behavior, listen for the cancel event and call event.preventDefault().

<dialog id="my-modal" style="width: 480px; padding: 16px 32px;">
  <button style="float: right;" onclick="this.parentElement.close()">Close</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
</dialog>

<script>
  document
    .getElementById('my-modal')
    .addEventListener('cancel', function (event) {
      event.preventDefault()
    });
</script>

Run on CodePen

Inlined <dialog oncancel="arguments[0].preventDefault()">...</dialog> does not work on the browsers that don't support HTMLDialogElement natively.

License

WTFPL

Other Vanilla JS Modal Packages

• https://github.com/Ghosh/micromodal
• https://github.com/robinparisi/tingle
• https://github.com/edenspiekermann/a11y-dialog
• https://github.com/KaneCohen/modal-vanilla
• https://github.com/hubspot/vex