Modals in CSS are an important part of a website or mobile UI system. Mostly, modals are created using <div> elements and styling them as required. Typically, a modal consists of a backdrop that serves to separate the modal window from the main UI and the main dialog that holds the content to be displayed in the UI.

Introduction

In this article, we will create a modal using <dialog> HTML tag, style it using :modal pseudo-class and see its various implementations using examples. The dialog element can be used either as modal or non-modal dialog.

Modal dialog

The dialogs that interrupt interaction with the rest of the page are called modal dialogs. They make the page content inert while the dialog is open. The interaction is blocked via a backdrop element which stays behind the modal and above the page blocking access to the page.

Non-modal dialog

The dialogs that allow interaction with the rest of the page when the dialog is open are called non-modal dialogs.

Activation of dialog

By default, a dialog is hidden and it will be visible when the open attribute is added to the dialog.

<dialog open>
 <!-- Content here -->
</dialog>

When we use the open attribute, it only activates or opens a non-modal dialog. So, instead of using the attribute, it is better to activate it programmatically using JavaScript.

There are two methods to display the dialog:

1. .show() – used to display a non-modal dialog, and
2. .showModal() – used to display a modal dialog

const dialog = document.querySelector("dialog");

// Open a non-modal dialog
dialog.show();

// Open a modal dialog
dialog.showModal();

// Close a dialog
dialog.close();

We can close the dialog in several ways:

• Use the .close() method
• Pressing Esc key
• Submitting a <form> nested within the <dialog> element with attribute method="dialog"
• The button used to submit the form has the attribute formmethod="dialog"

Styling the dialog

The main dialog (modal or non-modal) element can be styled normally using a tag selector or adding a class to the <dialog> and using the class selector in CSS. The modal dialog can also be styled using the :modal pseudo-class.

In addition, the backdrop can be styled using the CSS ::backdrop pseudo-element.

Styling with tag name – dialog

dialog {
    border: 2px solid #ddd;
    border-radius: 10px;
}

Styling with pseudo-class :modal

:modal {
    border: 2px solid #7c3aed;
}

Styling the backdrop with pseudo-element ::backdrop

::backdrop {
    background-color: rgba(124, 58, 237, .2);
}

Closing on outside click

By default, we expect the modal to be closed on clicking outside the modal element. But, the dialog element doesn’t support automatic closing on outside click. We can easily add some simple JavaScript to close the modal dialog on outside click.

In below code, we check if the current mouse position is outside the modal dialog bounds by using – clientX and clientY and left, right, top and bottom positions of the modal dialog.

modalCloseDialog.addEventListener("click", (event) => {
    const dialogArea = modalCloseDialog.getBoundingClientRect()
    if (
        event.clientX < dialogArea.left || event.clientX > dialogArea.right ||
        event.clientY < dialogArea.top ||event.clientY > dialogArea.bottom
    ) {
        modalCloseDialog.close();
    }
})

Demo – HTML Dialog element

Summary

In this article, we learned about modal and non-modal dialogs and how to use the <dialog> element, how to activate or open them and how to close them using inbuilt functions. Additionally, we also learned to style them with tag name or using pseudo-class :modal and style the backdrop using pseudo-element ::backdrop . Finally, we learned to add some extra features to it with some simple JavaScript.