New HTML <dialog> tag: An absolute game changer

Tari Ibaba

Last updated on June 29, 2024

New HTML <dialog> tag: An absolute game changer

HTML will never be the same with the new <dialog> tag.

❌Before:

See how much work it would have taken me to create a dialog 👇

Almost 20 lines of CSS alone:

And that's just CSS for the dialog functionality -- it will still look very basic:

But how about with the new <dialog> tag!

✅ Now:

<button id="open">Open</button>
<dialog id="dialog">
  ⚡Lighting strikes the earth 44 times every second!
</dialog>

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');
open.addEventListener('click', () => {
  dialog.showModal();
});

We can even use the show() method to show a non-modal dialog -- less intrusive with no backdrop:

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');
open.addEventListener('click', () => {
  dialog.show();
});

Dialogs have always been a powerful way to forcefully seize your user's attention and slam information in their faces.

It's been a staple feature of every UI design system from Material Design to Fluent Design.

But even as common as they are we always had to resort to third-party libraries or create custom components to use them.

And many of these libraries don't even follow the official recommendations for usability & accessibility...

Example: pressing the Escape key should dismiss the dialog on the page -- but this doesn't happen for many custom dialogs.

So <dialog> changes all that.

Auto-open dialog

The open attribute keeps the dialog open from the moment you open the page:

<dialog id="dialog" open>
  Giraffes are much more likely to be
  struck by lightning than humans are.
  In fact, they're 30 times more likely
</dialog>

Auto-close button

Yes, you could add close functionality with standard event listeners and the close() method:

const close = document.querySelector(
  '#dialog .close'
);
close.addEventListener('click', () => {
  dialog.close();
});

But the built-in <dialog> makes this even easier -- no JavaScript needed:

<dialog id="dialog">
  ⚡Gain essential coding skills & knowledge at
  codingbeautydev.com
  <br />
  <form method="dialog">
    <button class="close">Close</button>
  </form>
</dialog>

How to style the right way

<dialog> has a special ::backdrop pseudo-element for styling the backdrop:

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

Styling the main element is straightforward:

dialog {
   background-color: black;
   color: white;
 }

Final thoughts

With the new HTML <dialog> tag, creating modals and dialogs in our web apps has never been easier and faster.

Try Coding Beauty AI Assistant for VS Code