Exploring HTML dialog element with examples
Tags: javascript, css, html, codenewbie
Published: 2020-11-25 07:53:25

The `dialog`(widely known as a modal dialog) is a popup box on a web page.  A dialog is also called a modal dialog when it obscures the rest of the page content with an overlay. The purpose of a modal dialog is when it displays, the user should not be able to interact with the rest of the page content.

Here is an example of a sample modal dialog. The darker background of a dialog is called the `backdrop cover`.

> ![sample.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606113590688/oknRwOpCg.png)
*Figure 1: Sample modal dialog box with a backdrop cover*
this article, we will explore the `<dialog>` element from HTML and see the usages of it. We will also learn about some of the shortcomings and finally, validate if it is ready to use in your applications.

# The HTML native `<dialog>` Element
The HTML `<dialog>` element represents a dialogbox which has one special attribute,
- `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.

```html
<dialog>
  User can not see me.
</dialog>

<dialog open>
  I'm open and visible!
</dialog>
```
While writing this article, It has got browser support of,
- `Chrome`: From version 37+
- `Edge`: From version 79+
- `Firefox`: Supported in Firefox by enabling the `dom.dialog_element.enabled` flag in the about: config setting. Even with the flag, the backdrop CSS styling doesn't work.
- `Safari`: No support.

You can read about the other platforms [from here](https://caniuse.com/?search=dialog). 

> This feature deserves wider support than what it has today. But the good news is, this feature is Polyfillable. You can install the [polyfill from here](https://github.com/GoogleChrome/dialog-polyfill).


# The `<dialog>` APIs
There are APIs available to show and hide the dialog.

```js
dialog.show(); // to show the dialog
dialog.close(); // to close the dialog
```
The dialog box appears with the basic user-agent provided styles like, auto margin, thick border styles, etc. which can be easily customized using CSS.

> ![ua_styles.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606132162636/6wGpBnMAJ.png)
*Figure 2: Shows the basic UA styles on the Chrome browser*

Here is a CodePen shows the show-hide of a basic dialog element.

{% codepen https://codepen.io/atapas/pen/wvWVgQy %}

## Use `dialog.showModal()` instead of `dialog.show()`
One of the desired things about building your custom dialog is how you get a backdrop cover such that, user can not interact with the rest of the app. The method `dialog.showModal()` gives that to you for free when you use it from JavaScript.

By default, the backdrop cover is of the low opacity black color. You can control the look and feel of it with the `::backdrop` pseudo-element. Check this CodePen to know how it works,

{% codepen https://codepen.io/atapas/pen/jOrgBrJ %}

## Closing the dialog from the `<form>` element.
The `<form>` elements can close a dialog if they have the attribute method="dialog". We do not need an explicit `dialog.close()` JavaScript API call in that case.

```html
<dialog id="dialog">
  <p>I'm a dialog. Close me using the button below.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
```

## Escape(ESC) key close
The functionality to close the dialog using the escape key comes by default with the `<dialog>` element. This is an added benefit as you do not have to implement it.

## Web Accessibility
Modals are actually the hardest to achieve web accessibility. The `<dialog>` element spec mentions addressing the [accessibility concerns](https://html.spec.whatwg.org/multipage/dom.html#concept-element-accessibility-considerations).

# Shortcoming
The functionality of clicking outside of a dialog to close it is not available yet. Maybe it will be added in the future. As of now, you have to implement it.

# So, is it Ready to Use?
Apart from the `shortcoming` mentioned above, the `dialog` component looks complete to use along with the polyfill. As it is available natively with HTML, you do not need any additional library support to implement a modal dialog.

# Let's Explore Further
I would like to leave you with this CodePen where you can explore it further to see how a backdrop can be improved, animation can be added. You can also find examples to add a backdrop like effect where it is not supported yet.

{% codepen https://codepen.io/atapas/pen/QWEXPZW %}

# Before We End...
Thank you for reading this far! Let’s connect. You can @ me on [Twitter (@tapasadhikary)](https://twitter.com/tapasadhikary) with comments, or feel free to follow. Please like/share this article so that it reaches others as well.

You may also like,
- [10 useful HTML file upload tips for web developers](https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi)
- [I made a photo gallery with CSS animation. Here’s what I learned.](https://blog.greenroots.info/i-made-a-photo-gallery-with-css-animation-heres-what-i-learned-ckfzbk6v903ea2xs14l1942f7)
- [10 lesser-known Web APIs you may want to use](https://blog.greenroots.info/10-lesser-known-web-apis-you-may-want-to-use-ckejv75cr012y70s158n85yhn)
- [10 useful HTML5 features, you may not be using](https://blog.greenroots.info/10-useful-html5-features-you-may-not-be-using-ckdua7ql300l1m3s1ez7teshc)