DanielSeptember 1, 2023September 7, 2023

It has been quite a while since I wanted to play with the HTML <dialog> element.

Had some time this week and managed to pull together this small example:

It covers some basic operations such as reading data, showing the dialog as modal or non-modal, and CSS styling.

Let's code!

Creating a simple HTML Dialog

The first step will be to set the markup for the HTML Dialog :

<dialog id="cat-dialog">
    <form method="dialog">
        <input type="text"
            id="cat"
            name="cat"
            placeholder="Who is your favorite cat?"
            oninput="this.form.elements.confirm.value=this.value;">
        <p>
            <button id="confirm" value="confirm">Submit</button>
            <button value="cancel">Cancel</button>
        </p>
    </form>
</dialog>

In this code, we have defined a dialog element with the ID cat-dialog. Inside it, there is an <form> element where we can input the name of our favorite cat or cancel the dialog.

Opening the Dialog as modal or non-modal

By default, our dialog is not visible. Using the showModal() method will display the dialog as a modal:

let btnShowModal = document.querySelector('[data-modal]')
btnShowModal.addEventListener('click', () => modal.showModal())

On the other side if we want to open the dialog as non modal we can just use the show() method:

let btnShowNonModal = document.querySelector('[data-non-modal]')
btnShowNonModal.addEventListener('click', () => modal.show())

By the way, if you want the dialog to be visible by default you can add the open attribute to the element:

<dialog id="cat-dialog" open>

Reading data from an HTML Dialog

If you just want to get a yes/no response from a user, like a Javascript confirm() popup we can just use the returnValue:

// will return Submit or Cancel
let modal = document.querySelector('#cat-dialog')
modal.addEventListener('close', ()=> console.log(modal.returnValue))

Reading the actual name of the cat requires us to update the value as we type:

// in the markup
oninput="this.form.elements.confirm.value=this.value;"

// will return Cancel or the name of the cat if the user presses Submit
modal.addEventListener('close', ()=> console.log(modal.returnValue))

Styling the Dialog

Adding CSS styling to the dialog is pretty straight forward:

dialog {
    border: 5px solid orangered;
    border-radius: 5px;
    text-align: center;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

Keep in mind that the ::backdrop will be ignored if the dialog is not opened as a modal.

You can see the full code here and the running example here.

Also, you can find on web.dev a really good article that goes into more detail about the dialog element and wrote a post on the different ways to close a dialog.