Adding a close icon for an HTML dialog

DanielSeptember 7, 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 code will look like this:

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

<script>
    let btnShowModal = document.querySelector('[data-modal]')
    let modal = document.querySelector('#my-dialog')
    btnShowModal.addEventListener('click', () => modal.showModal())
</script>

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