Native Browser Dialogs and HTML Dialog Libraries [State of the Web]

An HTML dialog is a container for content which overlaps the rest of the site and is in the foreground. From a designer’s perspective a dialog catches the focus of the user and may block the remaining content from being interacted with.

Therefore nearly every component library supports a dialog component. Nevertheless, there is no built in dialog component on the web platform. Especially the positioning and the blocking of the background can be an error-prone task.

Since the web is evolving and becoming more mature, a new HTML dialog element is being standardized to meet developers‘ needs. Today the implementation can be used directly in Chrome and in Firefox (with a flag). Hopefully in the future more browsers will add support.

What is Expected from the Standardized Dialog Element

In this section I created some requirements the new HTML dialog element should match in order to satisfy the developers‘ needs.

1. The dialog has to overlay the other content to call the users‘ attention and force them to interact with it.
2. The dialog needs to be positioned on the page. Size and position of the dialog should be able to change.
3. The alert and prompt are also elements to force a decision from the user but in distinction that the dialog element should be able to be styled and contain other HTML elements.
4. It should be able to block the background so no scrolling and tabbing in the background should be possible. However this should not be forced by the dialog element.
5. It should be able to hide the background with something like a backdrop.
6. The content behind the dialog should not jump around when the dialog opens.
7. It should be possible to stack multiple dialogs.
8. A click on the backdrop closes the modal if the developer implements this behaviour.
9. The dialog should be closed when the esc key is pressed.
10. The dialog should be accessible for humans with all kinds of disabilities.

Using the dialog

At first it is important to get specific about the wording. A dialog is a box of content which is above the content of a page. The backdrop is something like a shadow behind an element which prohibits the interaction with the content behind it. Last but not least a modal is the combination of a dialog with a backdrop. Simply put: dialog + backdrop = modal.

The HTML dialog element has a single attribute. It is called open and used to show the dialog element as dialog.

In JavaScript the HTMLDialogElement has three methods show, showModal and close . show  and showModal open the dialog and display the content to the user. show opens the dialog as dialog and showModal as modal. The close method closes both variants.

When the dialog is opened as modal, the ::backdrop pseudo-element can be used in CSS to style behind the opened dialog.

Modal

Dialog

Capabilities of the HTML Dialog Element

This section I will check if the dialog can match the requirements. Therefore I provide a codesandbox which shows my implementation. You can check and edit it with Google Chrome.

Overlaying the Content

Creating an overlay above the main content is the key feature of the dialog and therefore it is no surprise that this works as expected. Even with z-index it is not possible to overlay the dialog content. You can see the code here.

Changing Size and Position

The dialog can be changed like all block elements in size and position with the exception of the left and right properties. width and height are used to change the size of the dialog. With top and bottom the positioning of the dialog can be changed. The horizontal alignment can be changed with left and right. But because both values are set originally to zero, left and right need to be set together. The one for positioning to the absolute value and the other to auto.

No Jumping Background

On macOS it doesn’t jump. The site keeps its scrollability when the dialog opens, if this is not the wanted behavior, it needs to be changed manually. This can introduce some changes to the background which let it jump again. So this problem is not solved by the dialog element and still some hacks are needed to disable scrolling of the body. It’s the same problems with jumping in the background (see above).

Style Dialog and Contain HTML

As long as the dialog is not open, it is not displayed. Or in CSS:  dialog:not([open]){display: none;}.

And when the dialog is opened and displayed it gets a display-value of block. So nothing special here and therefore the dialog can contain any HTML as it would be a div element.

Blocking Interaction with the Background

When the site is longer and the dialog is shorter than the viewport, even with an opened dialog the pages is scrollable. Then the dialog is positioned absolute, so the dialog can be scrolled out of the viewport.

Hiding the Background

Beneath the dialog element the CSS pseudo element ::backdrop is rendered. This element only appears when the dialog element is used as modal. So a background-color can be set to hide some of the background. The dialog element itself will not change.

Stacking HTML Dialogs

A dialog in a dialog can be used by opening a second dialog. It is not possible to open the same dialog because the dialog is shown/hidden only by CSS. A dialog opened as modal also overlays earlier opened dialogs and modals.

Closing HTML Dialog with a Click on the Backdrop

Natively nothing happens when clicking the backdrop. Strictly speaking the backdrop is part of the dialog element.

Adding an event listener to the backdrop is not possible since it is only a pseudo element. But an event listener can be added to the dialog which catches clicks on the backdrop and the dialog itself.

The next step is to disable the propagation of events from inside the dialog into the dialog element. Therefore the first child of the dialog is a container which stops events to propagate upwards.

Now the dialog only gets events from the backdrop. So an event listener on the dialog can close the dialog on click.

Closing with the ESC Key

The dialog element natively supports the closing via the ESC key when it is used as modal. Dialogs can’t be closed natively via ESC key so you have to implement it yourself, if need be.

Accessibility

According to the specification for the dialog element the ARIA role dialog needs to be set. Also the ARIA property modal is inherited by dialog. Therefore a browser which fulfills the requirements implements the dialog elements which can be interpreted by accessibility helper tools.

Also the specification forces the focus onto the dialog after the dialog opens. So the accessibility tools move the focus of the user to the dialog.

Chrome does set the ARIA role and properties and sets the focus to the dialog.

Conclusion

The HTML dialog element will ease the use of dialogs and modals in upcoming browser versions. The component libraries can remove much code and use the browser implementation of the dialog element.

Unfortunately the dialog element is only supported in Chrome and behind a flag in Firefox right now. Therefore it will take some time until the native dialog element can be used. Google provides a polyfill but in my opinion the component libraries will rather keep their own coded dialog and only new libraries will use the polyfill.

All in all I like the approach to create a standard for a widely used technique, thus it will be harmonized between different browsers and component libraries.

Further Reading

MDN – CSS::backdrop

MDN – HTML dialog Element

MDN – HTMLDialogElement in Javascript

W3C HTML5 Specification

[hoops name=“CanIUse“]

All Articles in this Series

• Screenshot Testing mit BackstopJS
• CSS Scroll Snap
• WebAuthn