Dialogs in HTML

A native modal: the form method closes it and returns a value.

<dialog id="confirm-reset">
  <form method="dialog">
    <h2>Reset this tour?</h2>
    <p>Your stars for the Python basics tour will be cleared.</p>
    <button value="cancel">Keep them</button>
    <button value="reset" autofocus>Reset</button>
  </form>
</dialog>
<button type="button" id="open-reset">Reset progress</button>

How it works

1. showModal() opens it and traps focus inside.
2. method=dialog closes the dialog and reports the button value.
3. The backdrop is styled with ::backdrop.

The run, in numbers

Lines

9

Characters to type

307

Tokens

73

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 58 seconds.

Type this snippet

Step 3 of 4 in Disclosure & dialogs, step 3 of 13 in Interactive HTML.

← Previous Next →