Mastering the HTML5 <dialog> Element: A Native Solution for Modals

Introduction: Dialog tag was introduced in HTML5, and you know what that means—no more being chained to external solutions like Bootstrap for those modals and popups! With HTML5's native element, you can create dialog boxes, prompts, and popups directly in your code.

Let's create a simple form inside a dialog tag and a button that will magically open the form when clicked.

Creating the Dialog (It's Simpler Than You Think!):

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

Explanation: We created a <dialog> and nestled form inside it. The form asks for a name (because naming things is, of course, the hardest part of programming). We've added two CTAs—one to submit the form and one to cancel it. Easy peasy.

Let’s Toggle the Dialog Visibility:

Dialogs are shy by default (i.e., they’re hidden), but fear not! With a little JavaScript, we can call them into action! Here's the magic spell:

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

Explanantion: We use querySelector to select our dialog. Then, we write two functions—one to open the dialog and one to close it. Just like that - the dialog opens and closes at your command!

HTML Code in Action:

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

Explanation:

1. We’ve attached closeDialog() to the "Cancel" button.
2. The "Open" button uses showDialog() to open the dialog.

Now, I know what you're thinking: "But what if the user clicks outside the form (on the backdrop)?" Don't worry—I got your back!

Let’s Close the Dialog When Clicking on the Backdrop:

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

Explanation: We added an event listener to the dialog itself that closes the dialog if the backdrop is clicked. The content div is our safeguard—if you click inside, the dialog stays put. But click outside? Poof! It’s gone.

Time to Style the Dialog:

Here’s some basic styling to jazz up your dialog box. We’ll also add some backdrop transparency for that sleek modal look so that it won't overshadow everything around it."

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

Try It Yourself! 🎉

Want to see the dialog in action? Check out this code sandbox:

👉 Click here to open the code sandbox!

You can play around with the code, tweak it, and watch the magic happen live. 💻✨

Browser Compatibility 🌐

The element is widely supported in modern browsers:

• Desktop: Chrome (37+), Edge (79+), Firefox (98+), Safari (15.4+), Opera (24+)

• Mobile: Chrome Android (37+), Firefox for Android (98+), Safari on iOS (15.4+), Opera Android (24+), Samsung Internet (3.0+), WebView Android (37+)

Conclusion:

That’s it! You’ve now mastered the HTML5 element. Whether you want to create a popup, prompt, or full-on form, the tag is your new best friend.

But before you go, here’s a pro tip: You should create a reusable dialog component for your entire project.

Hey, don’t forget to like, share, and show this post some love if it made your life easier.

Happy coding!