HTML dialog Tag: How to Create Dialog Boxes

The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts.

Understand the <dialog> Tag in HTML

The <dialog> tag creates a pop-up box. It stays above the rest of the page. It works with or without user input. You can place forms or messages inside it.

• A modal dialog blocks page actions and forces the user to respond before going back.
• A non-modal dialog stays open and allows user input on the rest of the page.

Here are the benefits of the native dialogs:

• Works without extra scripts
• Manages focus automatically
• Closes on Esc or background click
• Accepts forms with a return value

The basic tag:

<dialog>Dialog content</dialog>

Required and optional parts:

• Start with <dialog> and end with </dialog>
• The open attribute shows the dialog
• Add buttons or forms inside

You can add the open attribute in HTML or with JavaScript. The dialog becomes visible.

For example:

<dialog open>This box shows</dialog>

Use JavaScript to show or hide it:

dialog.setAttribute("open", "");
dialog.removeAttribute("open");

How to Show and Close a Dialog

Use .show() for non-modal:

This opens the dialog but allows background interaction.

dialog.show();

Use .showModal() for modal:

This opens the dialog and blocks background input.

dialog.showModal();

Use .close() to dismiss:

Call this method to hide the dialog.

dialog.close();

Close the dialog on Esc or click:

Modal dialogs close on Esc or background click, and the browsers handle this. You can block this when you click on cancel events.

Use Forms Inside <dialog> Tag in HTML

Add a form with method=”dialog”:

This skips a full page reload and returns a value.

<form method="dialog">
  <button value="yes">Yes</button>
  <button value="no">No</button>
</form>

Capture user choice with returnValue:

Use the returnValue to detect the selected option.

dialog.addEventListener("close", () => {
 console.log(dialog.returnValue)
});

Validate or skip validation on close:

Use standard forms for validation. Use dialog.close() to skip checks.

The closedby Attribute

This attribute tracks what closed the dialog. It shows how the user exited.

Here is a list that shows you the potential value for closedby attribute:

• none: ignore Esc or background clicks
• closerequest: allow Esc or background
• any: accept all closing methods

Use it to decide how to process the dialog exit.

Here is an example:

<dialog closedby="closerequest"></dialog>

Style the Dialog and Accessibility

Here you can use the backdrop (::) for overlay. To do that, add a dark layer behind the modal.

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

Use CSS to fade dialogs in or out for transitions and animations:

@keyframes showUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

dialog[open] {
  animation: showUp 0.3s ease;
}

Keyframe example for open/close

@keyframes hideFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

You can assign this before removing the dialog.

Move focus to the dialog or a button inside.

dialog.querySelector("button").focus();

Use autofocus on key elements

<input autofocus>

This puts the cursor in the input box.

Screen readers detect the dialog as active. Hide background content.

<dialog aria-modal="true"></dialog>
<main inert></main>

Open and close with buttons

document.getElementById("openBtn").onclick = () => dialog.showModal();
document.getElementById("closeBtn").onclick = () => dialog.close();

Listen for when the user exits the dialog.

dialog.addEventListener("close", () => {
  console.log("User exited with:", dialog.returnValue);
});

Stop the form from submitting by default.

form.onsubmit = (e) => {
  e.preventDefault();
};

HTML <dialog> Tag Browser Support

Supported browsers and versions

Chrome supports closedby attribute. Other browsers do not.

Use a fixed-position div with custom styles and hidden classes and JavaScript to mimic modal behavior.

You can also use the dialog for these cases:

• Confirm delete or cancel
• Show login or register forms
• Display settings or alerts

Examples of HTML <dialog> Tag

Confirm User Action

<dialog id="confirmBox">
  <p>Delete file?</p>
  <form method="dialog">
    <button value="yes">Yes</button>
    <button value="no">No</button>
  </form>
</dialog>

The dialog opens and shows a yes/no choice. The close event captures the user’s choice.

Input Field With Return Value

<dialog id="inputBox">
  <form method="dialog">
    <label>Username: <input name="username"></label>
    <button value="submit">Submit</button>
  </form>
</dialog>

This shows a form with a field. You log the form data after submission.

Auto Show Modal on Load

window.onload = () => {
  document.getElementById("autoModal").showModal();
};

This opens a modal once the page loads. Use this for notices.

Custom Button to Close

<dialog id="noticeBox">
  <p>New update available.</p>
  <button onclick="noticeBox.close()">Close</button>
</dialog>

Click the button to close the box using JavaScript.

Wrapping Up

In this article, you learned how the <dialog> tag creates pop-up boxes. You also saw how to show, style, and close them with forms or buttons.

Here is a quick recap:

• Use .show() or .showModal() to control dialogs
• Add <form method="dialog"> to return a value
• Listen for the close event to process input
• Style the backdrop with ::backdrop
• Add autofocus, aria-modal, and inert for better access

FAQs

document.querySelector("dialog").showModal();

dialog.addEventListener("close", () => {
  console.log(dialog.returnValue);
});

Similar Reads