Frontend Development Transformed by the New <dialog>
Tag
❌ Before:
Creating a dialog used to be a labor-intensive task. Here’s how much work it took:
<!-- HTML for the dialog -->
<div class="dialog-overlay">
<div class="dialog">
<p>Dialog content...</p>
<button class="close-button">Close</button>
</div>
</div>
/* CSS for the dialog */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.dialog {
background: white;
padding: 20px;
border-radius: 5px;
}
.close-button {
background: #f44336;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
And that’s just the CSS for basic dialog functionality. It still looks very plain and requires additional JavaScript to handle opening and closing the dialog.
✅ Now:
With the new <dialog>
tag, we can achieve the same functionality with much less effort.
<!-- HTML using <dialog> -->
<dialog>
<p>Dialog content...</p>
<button class="close-button">Close</button>
</dialog>
// JavaScript to show and close the dialog
const dialog = document.querySelector('dialog');
dialog.showModal(); // To show the dialog
dialog.querySelector('.close-button').addEventListener('click', () => dialog.close());
We can even use the show()
method to display a non-modal dialog, which is less intrusive as it has no backdrop.
// JavaScript to show a non-modal dialog
const dialog = document.querySelector('dialog');
dialog.show(); // To show a non-modal dialog
Dialogs: A Vital UI Component
Dialogs have always been a powerful tool to capture user attention and deliver important information. They are a key feature in every UI design system, from Material Design to Fluent Design.
However, using dialogs often required third-party libraries or custom components. Many of these libraries didn’t follow best practices for usability and accessibility, such as dismissing the dialog with the Escape key.
The new <dialog>
tag simplifies all of this.
Auto-Open Dialog
The open
attribute keeps the dialog open from the moment you load the page:
<dialog open>
<p>Auto-open dialog content...</p>
</dialog>
Auto-Close Button
You can add close functionality with standard event listeners and the close()
method, but the built-in <dialog>
makes this even easier — no JavaScript needed.
<dialog>
<p>Dialog content...</p>
<button class="close-button" onclick="this.closest('dialog').close()">Close</button>
</dialog>
Styling the <dialog>
Tag
The <dialog>
tag has a special ::backdrop
pseudo-element for styling the backdrop.
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
Styling the main element is straightforward:
dialog {
background: white;
padding: 20px;
border-radius: 5px;
border: none;
}
Final Thoughts
With the new HTML <dialog>
tag, creating modals and dialogs in our web apps has never been easier or faster. This tag significantly reduces the complexity of implementing dialogs, enhances accessibility, and allows developers to follow best practices effortlessly.
Please share my blog and react as you wish...
Meet me on https://topmate.io/manojgohel
Top comments (3)
Thank you much! It´s always nice to show a working example. See HERE
In the Auto-Close Button you state "the built-in makes this even easier — no JavaScript needed." and then proceed to show javascript in the onclose attribute. I assume you meant to use
form
withmethod=dialog
right?Great one. How do you control the position of the modal?