A modal dialog is content that appears on top of all the page content. It makes the user focus only on specific content and restricts interaction with the rest of the page. For example, an alert box, confirmation box, newsletter signups, etc.

There are also non-modal dialogs that don’t restrict the user from interacting with other page content. For example, tooltips in a form that provide more info about input fields.

To create a modal or non-modal popup, we write our own logic using HTML, CSS, and JavaScript and build it from scratch. The new <dialog> element in HTML makes it easier to create modals with less effort.

How to create a dialog

We can surround any content with a <dialog> tag, and that content will appear inside a dialog.

<dialog open>
  <h3>Are you sure?</h3>
  <button>Ok</button>
</dialog>

Opening a dialog

The open attribute on the <dialog> tag makes the dialog visible by default. To conditionally open the dialog, we can use the showModal() or show() method provided by HTMLDialogElement.

The showModal() method

This method creates a modal dialog with a backdrop that closes with the Escape key. This modal doesn’t let the user interact with other page content.

<dialog id="modal">
  <h3>Are you sure?</h3>
  <button>Ok</button>
</dialog>

<button id="open-modal">Open Modal</button>

const openBtn = document.getElementById("open-modal");
openBtn?.addEventListener("click", () => {
  const modal = document.getElementById("modal");
  modal?.showModal();
});

The show() method

This method creates a non-modal dialog that doesn’t have a backdrop, lets the user interact with other page content, and doesn’t close with the Escape key.

const openBtn = document.getElementById("open-modal");
openBtn?.addEventListener("click", () => {
  const modal = document.getElementById("modal");
  modal?.show();
});

Closing a dialog

The Escape key closes a modal dialog by default. We can also close a dialog with both HTML and JavaScript code.

Closing in HTML

We need to wrap the dialog content with a <form> with its method attribute set to dialog and provide a submit button to submit the form. With this, the dialog will automatically close when we click on the submit button.

<dialog id="modal">
  <form method="dialog">
    <h3>Are you sure?</h3>
    <button type="submit">Ok</button>
  </form>
</dialog>

Instead of setting method=“dialog” on <form> tag, we can also set the attribute formmethod=“dialog” on the submit button.

<dialog id="modal">
  <form>
    <h3>Are you sure?</h3>
    <button type="submit" formmethod="dialog">Ok</button>
  </form>
</dialog>

Closing with JavaScript

We can use the close() method provided by HTMLDialogElement to close a modal. Wrapping the dialog content with a <form> tag is optional here.

<dialog id="modal">
  <h3>Are you sure?</h3>
  <button id="close">Ok</button>
</dialog>

const closeBtn = document.getElementById("close");
closeBtn?.addEventListener("click", () => {
  const modal = document.getElementById("modal");
  modal?.close();
});

To run any code when the dialog closes, we can add an event listener for the close event on the dialog element.

const modal = document.getElementById("modal");
modal?.addEventListener("close", () => {
  console.log('modal closed');
});

Returning a value from dialog

We can return a value from dialog while closing it in both HTML and JavaScript ways. The returned value can be accessed with the returnValue property of the dialog element. If the dialog is closed with the Escape key, then returnValue is empty.

To set the return value, we need to set a value attribute on the Submit button and assign it the value we want to return.

<dialog id="modal">
  <form method="dialog">
    <h3>Are you sure?</h3>
    <button type="submit" value="Hello World">Ok</button>
  </form>
</dialog>

After clicking on the submit button and closing the dialog, we can access the returnValue property on the dialog element.

const modal = document.getElementById("modal");
console.log(modal?.returnValue); // "Hello World"

Using JavaScript, we can pass a value in the close() method, and it’ll be set as returnValue when the dialog closes.

modal.close("Hello World");

Styling the dialog

The default styles of the dialog may not look fancy. To add styling to the dialog element, we can add a class or id attribute and add the styling for it.

<dialog class="modal-container">
  …
</dialog>

.modal-container {
  width: 300px;
  height: 150px;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
}

To style the backdrop, we can use the ::backdrop pseudo-element.

::backdrop {
  background: rgb(0, 0, 0, 0.5);
}

You may also like

• The HTML <picture> element
• The HTML <datalist> tag for filter search

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS