tags: Web, HTML

HTML 5.2 is currently at the ‘Recommendation’ phase with the W3C, which means that slowly each item in the specification is being worked on to bring them to your browser (well the features that the vendors deem are important). One of these is the dialog element. Currently it can only be used in Chrome and Firefox if you set the flag ‘dom.dialog_element.enabled’ in about:config. There is no support in Edge…unless you are using the new Chromium based development version, in which case you are good to go.

What gives, we have had dialogs for a long time now.

Well yes if you are using third party libraries such as JQuery and JQuery UI or Bootstrap with the associated JavaScript libraries. These libraries used div tags to hold the content and assigned a high enough z-index that they were always on top of any other element. But if you want this functionality without the overhead, then the dialog element may be the way to go.

Here is an example of a bootstrap styled dialog

image

There are two types of dialog available, the standard and modal and are called by using dialog.show() and dialog.showModal() respectivlty. The modal variant is guaranteed to be the top most element no matter what z-index other elements have. In this example I use the backdrop suedo class to block out the background, which is just a div containing lorum ipsum text.

image

Lets focus

By using the autofocus property of input elements, it is supposed to move the caret to that element, however in my testing I couldn’t get it to work. So use this JavaScript instead.

But my customers are on Internet Explorer, what about us?

Luckily there is a polyfill available from the Google developer team and can be found at https://github.com/GoogleChrome/dialog-polyfill.

What about the Submit bit?

Simply add a class to the Submit button, assign an event handler that picks it up and then get any form details. Submit them in the usual way either within the Form tag or manually gather the element contents and send via an API if you prefer.


Happy coding