html · level 3 · unit 6 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<dialog> is a box that waits, and opens it.
A sits on top of the page to ask or tell something, like a sign-up form or a warning. In HTML it is <dialog>, and it starts hidden.
A button opens it with no script. Give the button commandfor, naming the dialogue box's id, and a command: command="show-modal". means the rest of the page is blocked until the box closes.
Inside the box, a button with command="close" closes it, and people can also press Esc. Put a heading first, so screen readers announce what the box is about.
<button commandfor="newsletter" command="show-modal">Join our newsletter</button>
<dialog id="newsletter">
<h2>Join our newsletter</h2>
<p>One email a month, with offers and plant care tips.</p>
<label for="email">Email</label>
<input id="email" type="email">
<button commandfor="newsletter" command="close">Close</button>
</dialog>Press show my page to see it here.
commandfor and command reached browsers in 2025. Older browsers ignore them, so there the button does nothing.
guess first
What will a visitor see first?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<button commandfor="confirm" command="show-modal">Delete my account</button>
<dialog id="confirm">
<h2>Are you sure?</h2>
<p>This cannot be undone.</p>
<button commandfor="confirm" command="close">Keep my account</button>
</dialog>your turn
Your turn. Open and close the box.
Fill the blanks: the button on line 1 opens the box as a modal, and the button on line 5 closes the box called booking.
Press show my page to see it here.
- the first button opens a modalnot checked yet
- the inside button closes the boxnot checked yet
- it names the box's idnot checked yet
- the box starts hiddennot checked yet
fix it
Nothing opens. Can you fix it?
Press show my page to see it here.
- the button opens the box as a modalnot checked yet
- the close button still closes itnot checked yet
- Browsers only understand a few command words. Is open one of them?
- To open a dialogue box on top of the page, the command is show-modal.
- Change
command="open"tocommand="show-modal"on line 1, then press run.
nailed it
your page can ask questions politely. :D
<dialog>makes a box that starts hidden.command="show-modal"opens it and blocks the page behind.command="close"or the Esc key closes it.
new words in your collection
- dialogue box
- command
- modal
This lesson isn’t saved. A free account remembers every lesson you finish.