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.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay