friilancer

Dialog Tag: Your browser's native modal element

Dialog Tag: Your browser's native modal element

Aniediabasi Etukudo's photo
Aniediabasi Etukudo
·

3 min read

Introduction

Our web applications are usually designed to take advantage of popups or modals. These help us display necessary information usually in response to a user's action; it may be a success or error alert, a form, or an overlay to ensure users stay on the same page. The use cases of modals are endless and peculiar depending on the problem being solved. As essential as this component is to our modern-day web applications, engineers have always turned to custom elements built into different libraries or packages like Bootstrap and TailwindCSS.

Using <dialog>

The dialog HTML element natively solves our, "How to create Popups in HTML?" questions. Using a few lines of HTML, we can take advantage of this element to suit our use case; using CSS and javascript we can style and make it more interactive respectively. The two ways of implementing dialogs:

  • Modal dialogs

  • Non-modal dialogs

Non-modal dialogs are those opened by setting an "open" attribute in the dialog element.

<dialog open>
    <p>Non-modal Dialog<p>
</dialog>

For our use case, we would be focusing on modal dialogs. These are opened by calling showModal() or show() method on the dialog HTML element.

<body>
    <button id="toggler">Open dialog</button>

    <dialog id="dialog">
        <p>Non-modal Dialog<p>
    </dialog>

    <script>
        const button = document.getElementById('toggler')
        const dialog = document.getElementById('dialog')
        button.onclick = (e) => {
            dialog.showModal()
        }
    </script>
</body>

The resulting popup can be closed in multiple ways, these include:

Calling close() on the HTML element

const dialogElement = document.getElementById('dialog')

dialogElement.close()

Setting formmethod attribute on the close button


<dialog open>
    <p>Non-modal Dialog<p>
    <form>
        <button formmethod="dialog">Close</button>
    </form>
</dialog>

Setting dialog attribute on the form element in the dialog component

<dialog open>
    <p>Non-modal Dialog<p>
    <form method="dialog">
        <button>Close</button>
    </form>
</dialog>

We must note that all buttons within a form element that has its method attribute set to dialog, when clicked will trigger a close of the dialog component. Also, users can close modal dialogs when they press the escape key.

Creating our popup

Putting together all we currently know about the dialog element, we can go ahead to create our first popup. Here's a pen showing a basic popup I created:

https://codepen.io/anijay/pen/xxyNVLZ

Bonus

You might have noticed our popup has a greenish backdrop once the popup is in view. The backdrop of the dialog element can be styled with the ::backdrop CSS pseudo-element, if the modal element was opened with the showModal() function call.

Wrapping up

The native dialog element will come in handy when we want to easily create popups in our web applications. Multiple dialogs can be opened on the same page. One of the big pros of the dialog element is accessibility; one feature developers would be looking to have is, closing modals by clicking outside of them. Now, we do not need libraries or packages to easily implement one of the most used components in modern-day applications. Cheers!

HTML5CSS3