The New Dialog Element of HTML 5.2

The recent standard HTML 5.2 brings us a new element called <dialog>. This allows us to create modal dialog boxes which can be made interactive with a bit of JavaScript. Using the element is very simple, with its basic form looking like this:

<dialog open="">
This is a dialog box!
</dialog>

The additional attribute “open” makes sure that the dialog box is actually displayed. Without the attribute, even opening the box would require you to use JavaScript. By default, without the use of CSS, the dialog box looks very unappealing. It overlays the entire complete page content, places itself in the middle of the screen, framed by a black border, with a size determined by the content of the box. The overlay puts a so-called backdrop on the page, preventing any interaction with the content outside of the box. Backdrop is new as well, and it is the name of the according pseudo-element::backdrop, which can be styled via CSS to make it transparent, colorful, or however you want to. The dialog itself is designed as usual, via CSS, just like any other element. Within the dialogue element, use other HTML elements to structure your dialog box, and build it to match your requirements. Theoretically, there is no limit to your imagination. However, without JavaScript, this element has little use, as only displaying a static open or closed dialog window is not very sensible. The JavaScript methods showModal() and close() allow you to control the previously mentioned attribute open. The first method adds the attribute, opening the dialog box. The second method removes the attribute, closing the dialog box. We don't need more flexibility here anyways.

Speaking of New...

You may say this wasn't even new. And of course, you're right. Chrome has been supporting this exact implementation since 2014. In Firefox, you can activate this support. Microsoft is still thinking about it, at least for Edge. Others are not participating at all. Use this JavaScript polyfill to force the unwilling into cooperation. For the sake of vindication, it should be mentioned that the dialog element only makes sense from an accessibility standpoint. Screenreaders have an easier time identifying these elements. For the actual application case, which is the display of dialog boxes, there are several solutions, with the most popular being the implementation in Bootstrap, which can be realized in an accessible fashion as well. So, the element is not new in a literal sense. However, it has been newly added to the standard, making it a part of HTML 5.2.