<dialog>

Since:		HTML 5.1（2016）

The dialog element creates a native HTML dialog box (modal or popup). You can control its visibility using the JavaScript methods showModal() and close(), or with the open attribute.

Syntax

<!-- Non-modal dialog -->
<dialog open>
  <p>Dialog content</p>
</dialog>

<!-- Modal dialog (opened via JavaScript) -->
<dialog id="myDialog">
  <p>Modal content</p>
  <button id="closeBtn">Close</button>
</dialog>

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

<script>
  const dialog = document.getElementById('myDialog');
  document.getElementById('openBtn').addEventListener('click', () => {
    dialog.showModal(); // Open as a modal
  });
  document.getElementById('closeBtn').addEventListener('click', () => {
    dialog.close(); // Close the dialog
  });
</script>

Attributes and Methods

Attribute / Method	Description
open	An HTML attribute that makes the dialog visible. Without this attribute, the dialog is hidden.
showModal()	Opens the dialog as a modal. A semi-transparent overlay is shown behind it, and content outside the dialog cannot be clicked.
show()	Opens the dialog as a non-modal. Content behind the dialog remains interactive.
close()	Closes the dialog. An optional argument sets the value of the `returnValue` property.
returnValue	A property that holds the return value when the dialog is closed. It is typically set to the value of the submit button that was clicked.
::backdrop	A pseudo-element that lets you style the background overlay displayed behind a modal dialog using CSS.

Sample Code

sample_dialog.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    /* Dialog styles */
    dialog {
      border: none;
      padding: 24px;
      max-width: 400px;
      width: 90%;
    }
    dialog h2 {
      margin-top: 0;
    }
    /* Background overlay */
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
    .dialog-buttons {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }
  </style>
</head>
<body>

  <button id="openBtn">Confirm Delete</button>

  <!-- Confirmation dialog -->
  <dialog id="confirmDialog">
    <h2>Are you sure you want to delete?</h2>
    <p>This action cannot be undone.</p>
    <div class="dialog-buttons">
      <!-- Using a form tag allows the dialog to be closed with Enter or a submit button -->
      <form method="dialog">
        <button value="cancel">Cancel</button>
        <button value="confirm">Delete</button>
      </form>
    </div>
  </dialog>

  <p id="result"></p>

  <script>
    const dialog = document.getElementById('confirmDialog');
    const result = document.getElementById('result');

    // Open the dialog
    document.getElementById('openBtn').addEventListener('click', () => {
      dialog.showModal();
    });

    // Handle the dialog closing
    dialog.addEventListener('close', () => {
      if (dialog.returnValue === 'confirm') {
        result.textContent = 'Deleted.';
      } else {
        result.textContent = 'Cancelled.';
      }
    });
  </script>

</body>
</html>

Result

Clicking the "Confirm Delete" button dims the background and displays the modal dialog in the center of the screen. Clicking "Delete" shows "Deleted." on the page, and clicking "Cancel" shows "Cancelled."

View sample page

Adding CSS Animations

Adding CSS animations to the dialog's open/close transitions creates a smoother, more polished UI.

<style>
  /* Slide-in animation for the dialog */
  dialog {
    border: none;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 90%;
    animation: dialog-open 0.25s ease-out;
  }

  @keyframes dialog-open {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Fade-in for the backdrop */
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    animation: backdrop-open 0.25s ease-out;
  }

  @keyframes backdrop-open {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Button row inside the dialog */
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
  }
</style>

<button id="openAnimDialog">Open dialog</button>

<dialog id="animDialog">
  <h2 style="margin-top:0">Confirmation</h2>
  <p>Do you want to proceed with this action?</p>
  <div class="dialog-footer">
    <form method="dialog">
      <button value="cancel">Cancel</button>
      <button value="ok" style="background:#4a90e2;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;">Proceed</button>
    </form>
  </div>
</dialog>

<script>
var dialog = document.getElementById('animDialog');
document.getElementById('openAnimDialog').addEventListener('click', function() {
  dialog.showModal();
});
dialog.addEventListener('close', function() {
  console.log('Returned value:', dialog.returnValue);
});
</script>

Overview

The dialog element, introduced in HTML 5.2, lets you create confirmation dialogs and modal windows natively in HTML — no JavaScript or CSS workarounds required. Previously, you had to build modals manually using div elements and CSS, or rely on plugins like jQuery UI. The dialog element handles accessibility automatically, including focus management, keyboard navigation, and screen reader support.

A modal dialog opened with showModal() closes automatically when the user presses the Escape key. Focus is also trapped inside the dialog (focus trap), so pressing Tab cannot move focus to content behind it. These behaviors are critical for accessibility, and while replicating them in a custom div-based modal would require a significant amount of JavaScript, the dialog element handles all of this natively in the browser.

Placing a form method="dialog" inside the dialog makes form submission trigger the dialog's close() method. The value attribute of the submit button that was clicked is stored in dialog.returnValue, so you can determine in JavaScript which button closed the dialog. The ::backdrop pseudo-element lets you freely customize the overlay style shown behind the modal.