How To Make Modals With The HTML Dialog Tag

Using both Vanilla JS and React

An example of a modal we can build!

https://mostlyfocused.com/pages/articles/html_dialog_tags Check this article out on my site for a better reading experience!

A “modal” is a pop up that a site can use to display more information or interactivity. Usually, if we need one, we build it ourselves. But that can be tricky; the biggest pain points about modals are making sure to show/close them at the right times, the CSS, and blocking interactions from happening outside of it. And they must be accessible of course!

But, did you know that HTML has a tag to make modals for you? The dialog tag is a super handy element that does everything we need, it’s got a bunch of features and accessibility controls built right in for us. I’m going to explain everything in vanilla JS/HTML/CSS and then show how to seamlessly incorporate it into any framework like React at the end.

The basics of making a modal

Here’s our starting code.

<main>
  <h1>Modal Practice</h1>

  <button id='open'>Open Modal</button>
</main>

<script>
  const openBtn = document.querySelector('#open');
</script>

It’s so few lines of JS I’m just going to use a script tag to keep it all in once place. All we need is a button to open…