Menu
How to create modals and popups with Dialog tag in Html from Cules Coding by @thatanjan

How to create modals and popups with Dialog tag in Html

In this article, we will learn how to create modals and popups with Dialog tag in Html.

I have already created a video on this topic. You can watch it here:

Basic Structure

Here's the basic structure of the dialog element:

1<dialog>
2    <!-- Content of the dialog goes here -->
3</dialog>

Basic example

1<h1>Some content</h1>
2

3<button id="open-button">Open My Modal</button>
4

5<dialog id="modal">
6    <div class="modal-content">
7        <h2>Modal Title</h2>
8        <p>This is the content of the modal.</p>
9        <button id="close-button">Close</button>
10    </div>
11</dialog>
12

13<h1>Some more content</h1>
1// Seletcing the elements
2const modal = document.getElementById('modal')
3const openButton = document.getElementById('open-button')
4const closeButton = document.getElementById('close-button')
5

6openButton.addEventListener('click', () => {
7    modal.showModal()
8})
9

10closeButton.addEventListener('click', () => {
11    modal.close()
12})

This what it looks like by default.

Explanation

  1. In html, One button for opening the modal.
  2. Some basic content inside that dialog tag including a close button
  3. In js, we need to select 3 elements:
    • modal
    • open button
    • close button
  4. We added the click eventlisteners to the buttons.
  5. To open the button just use the showModal method from the modal object
  6. And close method for closing the modal.

As popup

When you use the showModal method you can not interact with the background. But if you use the show method then it will open as a popup and you will be able to interact with background.

1openButton.addEventListener('click', () => {
2    modal.show()
3})

Dialog tag with form

You get exta features when you use forms inside dialog

1<dialog id="modal">
2    <form method="dialog">
3        <input type="text" name="" value="" />
4        <button type="submit">Submit</button>
5        <button type="submit">Cancel</button>
6    </form>
7</dialog>

Suppose you want to close the modal without submitting the form. Plus you want to store the user input. You can do that with JS but dialog tag already have that built in feature. Just use method="dialog" on form.

But that can create a problem. You won't be able to submit the form. It always just close the modal.

To fix that just remove that attribute from form.

1<dialog id="modal">
2    <form>
3        <input type="text" name="" value="" />
4        <button type="submit">Submit</button>
5        <button type="submit" formmethod="dialog">Cancel</button>
6    </form>
7</dialog>

Use formmethod='dialog' on the close button of the modal. In this way, The close button will just close the modal but other submit button will submit the form and close the modal.

Watch the video for better understanding.

How to style?

Dialog tag can be styled as any other element. It also comes with a backdrop as pseduo element. Here is a simple example of making the backdrop blur.

1#modal {
2    width: 500px;
3    border: none;
4}
5

6#modal::backdrop {
7    background: rgba(0, 0, 0, 0.5);
8    filter: blur(2rem);
9}

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch: