TaskBuild a dialog with id 'hello'. Inside: <h2>Hi</h2>, <button>Close</button>. After the dialog, add a button that opens it. The JS should query #hello and call .showModal() once at load so the test sees it open.
<dialog>: modals without a framework
100 XP8 min
Theory
Native modals shipped in 2022
<dialog id="cookies">
<h2>Cookies</h2>
<p>We use cookies to remember your login.</p>
<button onclick="this.closest('dialog').close()">OK</button>
</dialog>
<button onclick="document.querySelector('#cookies').showModal()">
Show cookies dialog
</button>showModal() opens it as a true modal β backdrop dims the page, focus traps inside the dialog, ESC closes it, content behind is inert. All free, all native.
Two modes
dialog.showModal()β true modal (overlay + backdrop + focus trap + ESC closes)dialog.show()β non-modal (floats on top but page is still interactive)
Style the backdrop
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}A pseudo-element only available on dialogs in modal mode. Use it.
Why not just a div?
Before <dialog>, a "modal" meant: a fixed div + JS to manage focus + JS to handle ESC + a separate div for the backdrop + ARIA roles + tab-trap polyfills. That's 100+ lines of JS for what <dialog> does in 2.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.