A modal dialog is content that appears on top of all the page content. It makes the user focus only on specific content and restricts interaction with the rest of the page. For example, an alert box, confirmation box, newsletter signups, etc.
There are also non-modal dialogs that don’t restrict the user from interacting with other page content. For example, tooltips in a form that provide more info about input fields.
To create a modal or non-modal popup, we write our own logic using HTML, CSS, and JavaScript and build it from scratch. The new <dialog>
element in HTML makes it easier to create modals with less effort.
How to create a dialog
We can surround any content with a <dialog>
tag, and that content will appear inside a dialog.
<dialog open> <h3>Are you sure?</h3> <button>Ok</button> </dialog>
Opening a dialog
The open
attribute on the <dialog>
tag makes the dialog visible by default. To conditionally open the dialog, we can use the showModal()
or show()
method provided by HTMLDialogElement.
The showModal() method
This method creates a modal dialog with a backdrop that closes with the Escape key. This modal doesn’t let the user interact with other page content.
<dialog id="modal"> <h3>Are you sure?</h3> <button>Ok</button> </dialog> <button id="open-modal">Open Modal</button>
const openBtn = document.getElementById("open-modal"); openBtn?.addEventListener("click", () => { const modal = document.getElementById("modal"); modal?.showModal(); });
The show() method
This method creates a non-modal dialog that doesn’t have a backdrop, lets the user interact with other page content, and doesn’t close with the Escape key.
const openBtn = document.getElementById("open-modal"); openBtn?.addEventListener("click", () => { const modal = document.getElementById("modal"); modal?.show(); });
Closing a dialog
The Escape key closes a modal dialog by default. We can also close a dialog with both HTML and JavaScript code.
Closing in HTML
We need to wrap the dialog content with a <form>
with its method
attribute set to dialog
and provide a submit
button to submit the form. With this, the dialog will automatically close when we click on the submit button.
<dialog id="modal"> <form method="dialog"> <h3>Are you sure?</h3> <button type="submit">Ok</button> </form> </dialog>
Instead of setting method=“dialog”
on <form>
tag, we can also set the attribute formmethod=“dialog”
on the submit button.
<dialog id="modal"> <form> <h3>Are you sure?</h3> <button type="submit" formmethod="dialog">Ok</button> </form> </dialog>
Closing with JavaScript
We can use the close()
method provided by HTMLDialogElement to close a modal. Wrapping the dialog content with a <form>
tag is optional here.
<dialog id="modal"> <h3>Are you sure?</h3> <button id="close">Ok</button> </dialog>
const closeBtn = document.getElementById("close"); closeBtn?.addEventListener("click", () => { const modal = document.getElementById("modal"); modal?.close(); });
To run any code when the dialog closes, we can add an event listener for the close
event on the dialog element.
const modal = document.getElementById("modal"); modal?.addEventListener("close", () => { console.log('modal closed'); });
Returning a value from dialog
We can return a value from dialog while closing it in both HTML and JavaScript ways. The returned value can be accessed with the returnValue
property of the dialog element. If the dialog is closed with the Escape key, then returnValue
is empty.
To set the return value, we need to set a value
attribute on the Submit button and assign it the value we want to return.
<dialog id="modal"> <form method="dialog"> <h3>Are you sure?</h3> <button type="submit" value="Hello World">Ok</button> </form> </dialog>
After clicking on the submit button and closing the dialog, we can access the returnValue
property on the dialog element.
const modal = document.getElementById("modal"); console.log(modal?.returnValue); // "Hello World"
Using JavaScript, we can pass a value in the close()
method, and it’ll be set as returnValue
when the dialog closes.
modal.close("Hello World");
Styling the dialog
The default styles of the dialog may not look fancy. To add styling to the dialog element, we can add a class
or id
attribute and add the styling for it.
<dialog class="modal-container"> … </dialog>
.modal-container { width: 300px; height: 150px; border: 1px solid #d3d3d3; border-radius: 10px; }
To style the backdrop, we can use the ::backdrop
pseudo-element.
::backdrop { background: rgb(0, 0, 0, 0.5); }
You may also like
Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next | Angular | Vue | HTML | CSS
Very cool
How is it possible to trigger close-on-escape for non-modal s ?
Since it is implemented for modal dialogs, it should be an option also for non-modals, I think!
There is no default support for closing non-modal with
Esc
key. However we can add an event listener forEsc
key ondocument
and close the modal manually.