New HTML <dialog> tag: An absolute game changer

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