HTML <dialog> Tag

The <dialog> tag in HTML is used to create interactive dialog boxes or modal windows. These dialogs can be used for various purposes, such as displaying alerts, forms, or additional content that needs user interaction. Unlike a simple notification, dialogs often require an action to close or interact with them, bringing focused attention to the contained content.

Syntax

<dialog open>
  Content inside the dialog
  <form method="dialog">
   <button>Close</button>
  </form>
</dialog>

Attributes

Example

<button id="openDialog">Open Dialog</button>

<dialog id="myDialog">
  <p>This is a simple dialog box.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('myDialog');
  const openButton = document.getElementById('openDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });
</script>

More Examples

Basic Dialog with Close Button

<button id="openBasicDialog">Open Basic Dialog</button>

<dialog id="basicDialog">
  <h2>Basic Dialog</h2>
  <p>This dialog has a simple close button.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<script>
  const basicDialog = document.getElementById('basicDialog');
  const openBasicButton = document.getElementById('openBasicDialog');
  openBasicButton.addEventListener('click', () => {
    basicDialog.showModal();
  });
</script>

Explanation: This example demonstrates the most basic usage. The dialog is initially hidden. A button triggers the showModal() javascript function which displays it. The button inside the <form method="dialog"> closes the dialog.

Dialog with Form

<button id="openFormDialog">Open Form Dialog</button>

<dialog id="formDialog">
  <h2>Form Dialog</h2>
  <form method="dialog">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <button value="cancel">Cancel</button>
    <button type="submit">Submit</button>
 </form>
</dialog>


<script>
  const formDialog = document.getElementById('formDialog');
  const openFormButton = document.getElementById('openFormDialog');

  openFormButton.addEventListener('click', () => {
    formDialog.showModal();
  });

  formDialog.addEventListener('close', () => {
     if(formDialog.returnValue === 'cancel'){
         console.log('form cancelled');
     }
     else {
         console.log('form submitted');
     }
  });
</script>

Explanation: This example showcases using a form inside a dialog. The <form method="dialog"> will close the dialog but also allow the <button> elements to return a value. You can then listen to the close event of the dialog and read the returnValue to determine what button was clicked. The cancel button's value is set to "cancel", while the submit's type is submit, giving no value.

Dialog with Custom Styling

<style>
  dialog {
    border: 2px solid #333;
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  dialog::backdrop {
      background-color: rgba(0,0,0,0.5);
  }
</style>
<button id="openStyledDialog">Open Styled Dialog</button>

<dialog id="styledDialog">
  <h2>Styled Dialog</h2>
  <p>This dialog has custom styling.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<script>
    const styledDialog = document.getElementById('styledDialog');
    const openStyledButton = document.getElementById('openStyledDialog');

    openStyledButton.addEventListener('click', () => {
        styledDialog.showModal();
    });
</script>

Explanation: This demonstrates that you can style the dialog box using CSS, as any other HTML element. It also demonstrates the ::backdrop pseudo-element, which allows you to style the overlay behind the dialog.

Showing a non-modal dialog

<button id="openNonModalDialog">Open Non-Modal Dialog</button>

<dialog id="nonModalDialog">
  <h2>Non-Modal Dialog</h2>
  <p>This dialog is non-modal.</p>
    <button id="closeNonModal">Close</button>
</dialog>

<script>
    const nonModalDialog = document.getElementById('nonModalDialog');
    const openNonModalButton = document.getElementById('openNonModalDialog');
    const closeNonModalButton = document.getElementById('closeNonModal');

     openNonModalButton.addEventListener('click', () => {
        nonModalDialog.show();
    });
    closeNonModalButton.addEventListener('click', () => {
        nonModalDialog.close();
    });
</script>

Explanation: A modal dialog prevents the user from interacting with the rest of the page until they close the dialog. A non-modal dialog does not. You can use the show() function instead of showModal() to achieve this. The close() method is used instead of a <form method="dialog"> button, this has no value to return when closed.

Browser Support

Notes and Tips

• The <dialog> element is a semantic way to represent dialog boxes.
• Use dialog.showModal() to display a modal dialog and dialog.show() to display a non-modal one.
• Use dialog.close() to close a non-modal dialog.
• The open attribute is used to indicate that the dialog is currently displayed. This attribute can be included on page load to show the dialog by default.
• The formmethod="dialog" attribute should be used within dialogs with forms. It allows for easy closing of the dialog and return values.
• You can style the dialog using CSS like any other HTML element. Use the ::backdrop pseudo-element to target the background overlay.
• Ensure dialogs are accessible by using proper ARIA attributes if needed for enhanced screen reader support.
• Use dialogs to enhance user experience for important actions and prevent distractions.