DEV Community

joachim kliemann
joachim kliemann

Posted on • Edited on

3

Coding Clean Popups: The Power of the <dialog> HTML Element

Developing a modal popup using the <dialog> HTML tag can offer a native and standardized way to create popups without relying heavily on JavaScript libraries. The <dialog> element represents a part of an application that the user interacts with to perform a task, such as a dialog box, inspector, or window.

Integrating HTML Element

The <dialog> tag is very simple to implement. Here’s a basic example of how you can integrate it into your HTML:

<dialog class="modal" id="modal">
  <h2>An awesome modal title</h2>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Nam liber tempor cum soluta nobis eleifend</p>
  <button class="button close-button">close modal</button>
</dialog>

<button class="button open-button">open modal</button>
Enter fullscreen mode Exit fullscreen mode

Using JavaScript to Handle the Modal

To open and close the dialog, you need to add some JavaScript code to toggle the open attribute of the <dialog> element.

document.addEventListener('DOMContentLoaded', function () {
  const modal = document.querySelector("#modal");
  const openModal = document.querySelector(".open-button");
  const closeModal = document.querySelector(".close-button");

  openModal.addEventListener("click", () => {
    modal.showModal();
  });

  closeModal.addEventListener("click", () => {
    modal.close();
  });
});

Enter fullscreen mode Exit fullscreen mode

Styling with CSS

To style the <dialog>, you can use CSS as you would with any other HTML element. Here’s an example of how you might style the dialog:

.modal {
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / 30%);
  max-width: 60ch;
}

.modal::backdrop {
  background: rgb(0 0 0 / 40%);
}

.button {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
}

.button:hover {
  background-color: #555;
}

Enter fullscreen mode Exit fullscreen mode

Codepen

Browser Compatibility and Fallback

The <dialog> element is supported in most of modern browsers, but you should always check the compatibility and implement a fallback for unsupported browsers, usually by utilizing JavaScript libraries or other modal implementation methods.

Conclusion

Integrating and using a <dialog> element is fairly simple. It's essential for developers to use the <dialog> element where suitable because it follows the standard web specifications and ensures better accessibility and cleaner code structure.

Developing a modal popup using <dialog> can greatly simplify the process of creating interactive and user-friendly web applications, reducing reliance on heavy libraries and frameworks while maintaining clean and semantic code.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay