jreut

Tuesday, 24 October 2017 at 23:59 EDT

What's <dialog>?

Great question!

Today I downloaded FirefoxNightly, and a splash page welcomed me when I launched it. One of the links sent me to their experimental features page, and I stumbled across this interesting new HTML element. It turns out the latest stable release of Google Chrome has better support for it, but thanks Mozilla for showing it to me in the first place!

What does it do?

It's a modal!

this is a dialog
A <dialog> element.

I am excited to have a modal (or non-modal) dialog that doesn't need a JavaScript/CSS framework! If or when more browsers get around to implementing this, it could be pretty neat.

The HTMLDialogElement API

For me, one of the most interesting parts of this little discovery is the small API exposed by the DOM for this element:

open : boolean
Attribute that tells you whether the dialog is being shown. You can set this yourself, but the spec asks very kindly that you use one of the provided methods to change it. I think if they could, the spec writers would maybe make this a read-only attribute, but it seems like every element attribute is writable in HTML!
show() : void
Make the dialog visible at the point where the element was written in the document. If the dialog is already open, do nothing.
showModal() : void
Make the dialog visible on top of everything else in the center of the page, add a backdrop behind the dialog, and deactivate every other control on the page. For some reason this thing throws an error if the dialog is already open.
close() : void
Remove the open attribute, hide the dialog, and fire a 'close' event on the element.

Can I use it?

Probably not. Yet. Today, Opera and Chrome are the only browsers supporting it.

Can I fiddle around with it?

You bet! You could look at the source code of this document to see what I did to make that dialog element work. You can probably think of something much nicer, too. 


      
The styles and scripts that make this little dialog go.

    

    
What else?

    

    Try reading the spec or the MDN. They have a little more to say about accessibility and user-agent cancellation (ie. pressing ESC to close a modal.