HTML Dialog Generator

Build an accessible modal popup with the native HTML dialog element.

Border radius

8px

Backdrop darkness

50%

HTML
<button type="button" onclick="document.getElementById('welcome-dialog').showModal()">Open dialog</button>

<dialog id="welcome-dialog" aria-labelledby="welcome-dialog-title">
  <h2 id="welcome-dialog-title">Welcome!</h2>
  <p>This is a native HTML dialog. Press Esc or the button to close it.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
CSS
#welcome-dialog {
  border: none;
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

#welcome-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

HTML Dialog Generator

For years, modal popups required a JavaScript library to handle overlays, focus trapping and the Escape key. The native HTML <dialog> element now does all of that in every modern browser. The HTML Dialog Generator creates a complete, working modal — trigger button, dialog content, close button and CSS — that you can test right in the preview.

What the code contains

  • An open button that calls showModal() (modal with backdrop) or show() (non-modal).
  • The dialog with an id, an optional heading connected through aria-labelledby and your message.
  • A close button inside a form method="dialog" — submitting it closes the dialog without any script.
  • Optional CSS for border radius, padding, shadow and the ::backdrop overlay.

Built-in behaviour

A modal dialog opened with showModal() is rendered in the browser's top layer above everything else, makes the rest of the page inert, moves focus into the dialog and returns it to the opener afterwards. Pressing Esc closes it automatically. You get all of this for free, which makes <dialog> more accessible than most hand-written modals.

Use cases and tips

Use dialogs for confirmations ("Delete this file?"), short forms such as newsletter sign-ups, cookie notices or image lightboxes. Keep them focused on one task and always provide a visible way to close them. Avoid opening a modal automatically on page load, which annoys visitors and can hurt mobile rankings. For inline collapsible content use the HTML Details Generator; to style the trigger, see the HTML Button Generator.

Frequently Asked Questions

showModal() opens the dialog in the top layer with a backdrop, makes the rest of the page inert and lets Esc close it. show() opens a non-modal dialog that sits in the normal flow and leaves the page interactive.

A form with method="dialog" inside the dialog closes it when submitted, and the clicked button's value becomes dialog.returnValue. No click handler is needed.

Yes. Modal dialogs trap focus, restore focus to the opener when closed and are announced as dialogs. Adding aria-labelledby pointing to the heading, as the generator does, gives the dialog an accessible name.

Use the ::backdrop pseudo-element. The generated CSS sets a semi-transparent black background whose darkness you can adjust with the slider.