My life feels more native with the new dialog HTML element

🥳 The new HTML5 <dialog> element. 🥳

From the first glance on the element's page on MDN you can notice they wanted to standard a behavior for the modals by providing usability and accessibility features.

The native HTML <dialog> element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose. Use the appropriate .showModal() or .show() method to render dialogs. If creating a custom dialog implementation, ensure all expected default behaviors are supported and proper labeling recommendations are followed.

enough talk let's see some code.

<dialog id="favDialog">
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button id="showDialog">Show the dialog</button>

const showButton = document.getElementById('showDialog');
const favDialog = document.getElementById('favDialog');

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener('click', () => {
  favDialog.showModal();
});

Simple but enough. As you can see, we use the showModal() method to render the dialog. The form has method="dialog" so it closes the modal when submitted.

<form> elements can close a <dialog> if they have the attribute
method="dialog" or if the button used to submit the form has
formmethod="dialog" set. In this case, the state of the form
controls is saved, not submitted, the <dialog> closes, and the
returnValue property gets set to the value of the button that
was used to save the form's state.

We can also close the dialog with the close(returnValue) method. And to style the overlay behind the dialog we can use the ::backdrop CSS pseudo-element (which appears only when we use showModal()).

There are only 2 events related to the dialog.

• cancel: Fired when the user press Esc and the dialog is dismissed.
  

  addEventListener("cancel", (event) => {});
  
  oncancle = (event) => {};
  

• close: Fired when the dialog is closed with any other method.
  

  addEventListener("close", (event) => {});
  
  onclose = (event) => {};
  

More Info for nerds 👾

There is actually two more ways to open the dialog. showModal() is the classy way of doing it. But as you know some of us need to get dirty 😏.

Don't worry we got you. There is the show() method and the open attribute.

when we use showModal() it renders the dialog in the Top layer also Interaction outside the dialog is blocked and the content outside it is rendered inert. which means it can't receive focus or be clicked. Also the modal will have a ::backdrop CSS pseudo-element.

sometimes -for any reason- you don't need -or want- that behavior. you can then use the show() method. It will do just what you need but will keep the dialog with same accessibility features. But you can interact with content outside the dialog.

It's not recommended to do the following... but if you really need to do something really dirty. you can set the open attribute to true and then remove it to close the modal. oh, it's not a modal anymore.

open
Indicates that the dialog is active and can be interacted with. When
the open attribute is not set, the dialog shouldn't be shown
to the user. It is recommended to use the .show() or
.showModal() methods to render dialogs, rather than the open
attribute. If a <dialog> is opened using the open attribute,
it will be non-modal.