HTML Dialog Element
to use it
<button id="dialog-open">Open Dialog</button> <dialog> <h2>This is a dialog</h2> <p>Dialog Element</p> <button id="dialog-close">Close Dialog</button> </dialog>
const dialog = document.querySelector('dialog'); const open = document.querySelector('#dialog-open'); const close = document.querySelector('#dialog-close'); open.addEventListener( 'click', e => dialog.showModal() ); close.addEventListener( 'click', e=> dialog.close() );
and that’s it. Out of the box Chrome applies some basic styles to the dialog box, and would imagine other browsers would implement their own styling as well (A new reset needed?). You can set your own styling to it though, and can style the backdrop as well using
Support for the
<dialog> element is limited right now https://caniuse.com/?search=dialog with no support on Firefox (available behind a flag) or Safari.
Note that it can also be opened by CSS, however in our testing all we could do was overwrite the default value for the dialogs display, not open it properly.