Easy way to create custom modal

Introduction

The modal component is widely used in different kinds of web-applications. The "standard" way is to use CSS library like Bootstrap, Bulma, etc. But, since the browser support for <dialog> tag is gradually increasing, there is now a natural way to implement fully customizable modal component with built-in open/close functionality.

A quick example

The <dialog> HTML tag makes it very easy to create new modal.

See the Pen Untitled by mirushaki (@mirushaki) on CodePen.

Before even writing a CSS code, we can see a working version of modal element.  Let's clarify the HTML code.

Everything inside <dialog> and </dialog> tags is considered as the content of the modal. <dialog open> makes modal visible by default, so when page is loaded, the modal is already opened.
Inside the modal we have a simple <p> tag and the close button. In order to make the modal element close, we need to call close() function on of <dialog> DOM object, which in this case is referenced as this.parentNode, so we are calling this.parentNode.close() to close modal button click.

More examples

Most of the time, the modal is hidden by default and becomes visible on user interaction (clicking on a button) or as a result of some event.

To make the modal invisible by default, we need to simply remove "open" HTML attribute from <dialog> tag. Let's add a button to be able to open the dialog

See the Pen Untitled by mirushaki (@mirushaki) on CodePen.

Couple notes here:
1. We introduced couple lines of Javascript code to add event listeners on open/close buttons. 
2. We are using .showModal() function on dialog DOM object to display the modal. This is the recommended way to open the modal. We should not toggle the open attribute manually.
3. We have implemented some styling. The :modal CSS selector specifies the actual modal window. We have also :modal::backdrop selector to apply custom styles on backdrop.

Beside showModal() function, there is also simple show() function on dialog DOM object. So, what's the difference between these functions?

showModal() - opens the sub-window as a classic "modal window": backdrop is present and the content outside the sub-window is discarded: text is not selectable; buttons are not clickable and etc. The sub-window is displayed in the center of the screen.

show()  - opens the sub-window as a dialog: backdrop is not present; the sub-window is off-center, etc.

NOTE : :modal and :modal::backdrop CSS selectors work only when showModal() is used.

An alternative way to implement close button is to actually use the <form method="dialog"> inside the modal. 

See the Pen Untitled by mirushaki (@mirushaki) on CodePen.

Note: we removed close button selector and event listener from Javascript, but the code is still working, since we have the <form method="dialog"> and the button is inside the form.

Note: The dialog element can also be closed by clicking on ESC key on the keyboard.

We can also have multiple buttons inside the form. We can also get the information which button was clicked by the user. This is extremally helpful when creating interactive modal with Yes/No or Confirm/Cancel buttons:

See the Pen Untitled by mirushaki (@mirushaki) on CodePen.

On modal "close" event, we can access the returnValue property of the modal. The value of this property is exactly the value of the button which was clicked inside the form.

Conclusions:

The <dialog> HTML tag is awesome! We now have the standard way of creating the custom modals with minimal effort, which is really appreciated as opposed to importing large CSS libraries or writing non-compact and potentially buggy code

See more details and current support about the <dialog> element on this link