{"id":724,"date":"2024-02-05T12:07:03","date_gmt":"2024-02-05T18:07:03","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=724"},"modified":"2024-02-05T14:28:45","modified_gmt":"2024-02-05T20:28:45","slug":"basic-dialog-usage-and-gotchas-to-watch-for","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/basic-dialog-usage-and-gotchas-to-watch-for\/","title":{"rendered":"Basic Dialog Usage and Gotchas To Watch For"},"content":{"rendered":"\n

The <dialog><\/code> element in HTML is tremendous. We’ve got support across the board<\/a> now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where it came from. You can style it all entirely predictably in CSS. Those things range from a little bit of a pain to downright hard to pull off if left to our own implementations. Now we get them all for free<\/em> as they say.<\/p>\n\n\n\n

You don’t automatically get a close button, so here’s a basic implementation that adds that.<\/p>\n\n\n

<button<\/span> class<\/span>=\"show-dialog-button\"<\/span>><\/span>Show Dialog<\/button<\/span>><\/span>\n\n<dialog<\/span> id<\/span>=\"dialog\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"dialog-title\"<\/span>><\/span>\n    Hi, I'm a dialog.\n  <\/div<\/span>><\/span>\n  <button<\/span> aria-label<\/span>=\"Close Dialog\"<\/span> class<\/span>=\"close-dialog-button\"<\/span>><\/span>\n    <svg<\/span> ...<\/span>><\/span>\n  <\/button<\/span>><\/span>\n<\/dialog<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we need two click handlers, one for opening and one for closing.<\/p>\n\n\n
const<\/span> showDialogButton = document<\/span>.querySelector(\".show-dialog-button\"<\/span>);\nconst<\/span> closeDialogButton = document<\/span>.querySelector(\".close-dialog-button\"<\/span>);\nconst<\/span> dialog = document<\/span>.querySelector(\"dialog\"<\/span>);\n\nshowDialogButton.addEventListener(\"click\"<\/span>, () => {\n  dialog.showModal();\n});\n\ncloseDialogButton.addEventListener(\"click\"<\/span>, () => {\n  dialog.close();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
That code above is it really, that’s largely functional. And that, friends, is extremely cool. Here’s a quick live demo:<\/p>\n\n\n\n
I think the naming of things here almost qualifies as a gotcha. So it’s showModal()<\/code> eh? Why not showDialog()<\/code>, since, ya know, it’s for the <dialog><\/code> element? So to close it it must be closeDialog()<\/code> or hideDialog()<\/code> surely, right? No. Just close()<\/code>. Oh well I’m sure that was bikeshedded<\/a> to death and there are probably \u2728 reasons<\/em>.<\/p>\n\n\n\n