Adding a close icon for an HTML dialog

DanielSeptember 7, 2023November 2, 2023

After publishing the short intro to the dialog element I've received an email asking how can we add a close icon to that icon.

I've made the below example to show how can we do this:

There are two ways to close an HTML dialog:

1. programmatically, using the close() method of the dialog element
2. using a submit button, without any extra Javascript. When a user submits the dialog form, the data is maintained. While there is a submit event it will go through constraint validation and therefore the user data is neither cleared nor submitted.

The HTML code will look like this:

<dialog id="my-dialog">
    <form method="dialog">
        <button type="submit">❌</button>
        <p>This dialog can be closed using both the <code>close()</code> method or using a <code>submit</code> button.</p>
        <a href="#" data-dialog-with-js>Close dialog using Javascript</a>
    </form>
</dialog>
<button data-open-dialog>Open the dialog</button>

And the needed JS code:

// open the dialog
const btnShowDialog = document.querySelector('[data-open-dialog]')
const dialog = document.querySelector('#my-dialog')
btnShowDialog.addEventListener('click', () => dialog.showModal())

// close the dialog with Javascript
const closeDialogWithJs = document.querySelector('[data-dialog-with-js]')
closeDialogWithJs.addEventListener('click', () => dialog.close())

You can play with the live example here and the full code is on my github.