{"id":4069,"date":"2024-09-30T11:38:20","date_gmt":"2024-09-30T16:38:20","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4069"},"modified":"2024-09-30T11:38:21","modified_gmt":"2024-09-30T16:38:21","slug":"whats-the-difference-between-htmls-dialog-element-and-popovers","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/whats-the-difference-between-htmls-dialog-element-and-popovers\/","title":{"rendered":"What’s the Difference Between HTML’s Dialog Element and Popovers?"},"content":{"rendered":"\n
They are different HTML, to begin with. A dialog is like this:<\/p>\n\n\n
The reason it’s worth comparing them is that they are quite similar in a lot of ways, both in look and functionality, which can be confusing. It’s worth thinking about which one you really need.<\/p>\n\n\n\n
They are both hidden-by-default<\/h2>\n\n\n\n
If you put either bit of the HTML above onto the page, they will be visually hidden as well as ignored in the accessibility tree by default (but available in the DOM). It isn’t until you specifically show them (via JavaScript or on-page HTML control when available) that they are visible.<\/p>\n\n\n\n
\n
\nAccessibility tree with a hidden dialog and popover in it.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\nWhen dialog is open, it’s a part of the accessibility tree.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
You can<\/em> make a <dialog><\/code> visible by default in HTML alone:<\/p>\n\n\n
Where you cannot<\/em> make a popover visible in HTML alone. <\/p>\n\n\n\n
Popovers Have HTML-Only Controls<\/h2>\n\n\n\n
You can<\/em> make a popover work (open & close) with HTML controls alone:<\/p>\n\n\n
<!-- This button will open and close the matching popover. No JavaScript required. --><\/span>\n<\/span><\/span><button<\/span> popovertarget<\/span>=\"my-popover\"<\/span>><\/span>\n<\/span><\/mark> Toggle Popover\n<\/span><\/span><\/button<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><aside<\/span> popover<\/span> id<\/span>=\"my-popover\"<\/span>><\/span>\n<\/span><\/span> Content of popover\n<\/span><\/span><\/aside<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
But you cannot<\/em> build HTML-only controls for a <dialog><\/code>. Opening and closing a dialog requires JavaScript event handlers. <\/p>\n\n\n\n
JavaScript APIs<\/h2>\n\n\n\n
Dialog JavaScript APIs<\/h3>\n\n\n\n
The dialog APIs in JavaScript are interesting in that there are two different distinct APIs for opening it. This is where the term “modal” comes in. Modal is sometimes used as a term for the UI element itself, but here it essentially means if the modal should trap focus inside of it while open, or not. <\/p>\n\n\n\n
\n
.show()<\/code> \u2014 Open the dialog in a non-modal <\/em><\/strong>state, meaning no backdrop is shown and no focus trapping happens. Note that using the open<\/code> attribute in the HTML\/DOM to open the dialog is the same (non-modal). <\/li>\n\n\n\n
.showModal()<\/code> \u2014 Open the dialog in a modal <\/em><\/strong>meaning a backdrop is shown and focus is trapped within the modal. <\/li>\n\n\n\n
.close()<\/code> \u2014 Closes the dialog (if it’s open). <\/li>\n<\/ul>\n\n\n\n
The showModal()<\/code> method can throw if the dialog is already open in a non-modal state. <\/p>\n\n\n\n
Uncaught InvalidStateError: Failed to execute 'showModal' on 'HTMLDialogElement': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.<\/pre>\n\n\n\n
Popover JS APIs<\/h3>\n\n\n\n
Popovers also have JavaScript APIs, but both the opening and closing APIs are different than with modals and do not overlap. These are pretty self explanatory. <\/p>\n\n\n\n
\n
.showPopover()<\/code> \u2014 Opens the popover.<\/li>\n\n\n\n
.hidePopover()<\/code> \u2014 Closes the popover.<\/li>\n<\/ul>\n\n\n\n
Calling showPopover<\/code> on an already open popover or hidePopover<\/code> on an already hidden popover does not throw. <\/p>\n\n\n\n
Focus Trapping<\/h2>\n\n\n\n
The ability of the dialog element to be opened in a modal state and thus trap focus inside of it is a superpower of this element. It is unique to the dialog element, popovers cannot do this (on their own).<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-30-at-11.32.24%E2%80%AFAM.png?resize=762%2C248&ssl=1\")
![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-30-at-11.33.48%E2%80%AFAM.png?resize=1024%2C346&ssl=1\")