CodesBeautify

HTML Dialog Generator

Generate a native dialog element with its trigger button and the small script that opens it.

HTMLmodal dialog
<button type="button" data-open="confirm-dialog">Delete project</button>

<dialog id="confirm-dialog">
  <form method="dialog">
    <h2>Delete this project?</h2>
    <p>Every file and build log in the project will be removed. This cannot be undone.</p>
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete project</button>
  </form>
</dialog>

<script>
  const dlg = document.getElementById('confirm-dialog');
  document.querySelector('[data-open="confirm-dialog"]')?.addEventListener('click', () => dlg.showModal());
  dlg.addEventListener('close', () => console.log('closed with', dlg.returnValue));
</script>
Runs locally in your browser

About the HTML Dialog Generator

The <dialog> element replaced a decade of hand built modal code. Open it with showModal() and the browser handles the backdrop, traps focus inside the box, makes everything behind it inert, and closes on the Escape key. None of that arrives if you open it by setting the open attribute or calling show(), which produces a non modal panel that leaves the page underneath usable, so pick the method that matches what you want.

A form with method="dialog" inside the element is the neat part: submitting it closes the dialog without a network request and sets returnValue to the value of the button that was pressed. The generated script listens for the close event and logs that value, which is the hook where you would run the confirmed action.

The default styling is minimal, so expect to size the box and to style ::backdrop for the dimmed layer behind it. Keep an eye on two details: the dialog needs an accessible name, which the heading inside it supplies here, and there should always be a visible way out beside the Escape key, which is what the cancel button is for. For a disclosure that stays in the page flow rather than covering it, the HTML Details Generator is a lighter option.

How to use

  1. Set the id, heading and message.
  2. Label the confirm, cancel and trigger buttons.
  3. Choose modal or non modal opening.
  4. Copy the markup and script into your page.

Common questions

What is the difference between show and showModal?
showModal adds the backdrop, traps focus and makes the rest of the page inert. show opens the box while leaving everything behind it interactive.
How do I know which button was pressed?
A form with method="dialog" sets returnValue to the pressed button value, readable in the close event handler.
Does Escape close it?
Yes, for a modal dialog the browser closes it on Escape, so always provide a visible cancel control as well.
How do I dim the page behind the dialog?
Style the ::backdrop pseudo-element, for example with a semi transparent black background.