My life feels more native with the new dialog HTML element
Tags: html, css
Published: 2023-06-06 06:40:47

---
title: My life feels more native with the new dialog HTML element 
published: true
description: For years we have created modals with divs and sections and who knows what else but that was in the past now we have a standard way to create a modal. 

tags: HTML, CSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvhnseroygvrwpiefw64.gif
---


## 🥳 The new HTML5 `<dialog>` element. 🥳

From the first glance on the element's page on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) 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. 

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

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

```js
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. 

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

	oncancle = (event) => {};
	```

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

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

	onclose = (event) => {};
	```


![That's it](https://media.giphy.com/media/X4UbLBXjqaxB0hub6p/giphy.gif)

**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](https://developer.mozilla.org/en-US/docs/Glossary/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.