Modal Dialog

A pop-up done the modern way — with the built-in <dialog> element.

Open a dialog, close it with a button, the Escape key, or a click on the backdrop. Using the native <dialog> element means focus handling and Escape come for free — you'll see why that matters.

What's inside

• Opens with the native dialog.showModal()
• Closes on button, Escape, and backdrop click
• Focus trapping handled by the browser
• No overlay library and no z-index wars
• Light & dark mode, no dependencies

Quickstart

$ curl -LO https://devai.io/downloads/modal-dialog.zip$ unzip modal-dialog.zip && cd modal-dialog$ open index.html   # or just double-click the file

Browse the code

The full source, exactly as the zip ships it.