<dialog>: 對話方塊元素

Baseline 廣泛可用 *

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2022 年 3 月起，它已在各瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

<dialog> HTML 元素表示模態或非模態對話方塊，或其他互動式元件，例如可關閉的提示、檢查器或子視窗。

HTML <dialog> 元素用於建立模態和非模態對話方塊。模態對話方塊會中斷與頁面其餘部分的互動，使其處於非活動狀態，而非模態對話方塊則允許與頁面其餘部分進行互動。

應該使用 JavaScript 來顯示 <dialog> 元素。使用 .showModal() 方法顯示模態對話方塊，使用 .show() 方法顯示非模態對話方塊。對話方塊可以透過 .close() 方法關閉，或者當提交巢狀在 <dialog> 元素內的 <form> 時，使用 dialog 方法關閉。模態對話方塊也可以透過按下 Esc 鍵關閉。

屬性

此元素包含全域性屬性。

警告： tabindex 屬性不得用於 <dialog> 元素。請參閱使用注意事項。

closedby

指定可用於關閉 <dialog> 元素的使用者操作型別。此屬性區分對話方塊可能關閉的三種方法：

一種是輕量級關閉使用者操作，在這種情況下，當用戶點選或點選對話方塊外部時，<dialog> 會關閉。這相當於“自動”狀態彈出框的“輕量級關閉”行為。
一種是平臺特定的使用者操作，例如在桌面平臺上按下 Esc 鍵，或在移動平臺上進行“返回”或“關閉”手勢。
一種是開發者指定的機制，例如一個帶有 click 處理程式的 <button>，該處理程式呼叫 HTMLDialogElement.close()，或者一個 <form> 提交。

可能的值是

任意: 對話方塊可以透過以上三種方法中的任何一種關閉。
closerequest: 對話方塊可以透過平臺特定的使用者操作或開發者指定的機制關閉。
none: 對話方塊只能透過開發者指定的機制關閉。

如果 <dialog> 元素沒有指定有效的 closedby 值，那麼：

如果它是使用 showModal() 開啟的，則其行為就像值為 "closerequest" 一樣。
否則，其行為就像值為 "none" 一樣。

open

表示對話方塊處於活動狀態並可用於互動。如果未設定 open 屬性，則對話方塊將對使用者不可見。建議使用 .show() 或 .showModal() 方法渲染對話方塊，而不是 open 屬性。如果 <dialog> 是使用 open 屬性開啟的，則它是非模態的。

注意： 雖然可以透過切換 open 屬性的存在來在非模態對話方塊的開啟和關閉狀態之間切換，但此方法不推薦。有關更多資訊，請參閱 open。

用法說明

HTML <form> 元素可以用於關閉對話方塊，如果它們具有 method="dialog" 屬性，或者用於提交表單的按鈕設定了 formmethod="dialog"。當 <dialog> 內的 <form> 透過 dialog 方法提交時，對話方塊會關閉，表單控制元件的狀態會被儲存但不會提交，並且 returnValue 屬性會被設定為被啟用按鈕的值。
CSS ::backdrop 偽元素可用於樣式化模態對話方塊的背景，當使用 HTMLDialogElement.showModal() 方法顯示對話方塊時，該背景會顯示在 <dialog> 元素後面。例如，此偽元素可用於模糊、變暗或以其他方式遮蔽模態對話方塊後面的非活動內容。
autofocus 屬性應該新增到使用者預計在開啟模態對話方塊後立即進行互動的元素上。如果沒有其他元素需要更即時的互動，建議將 autofocus 新增到對話方塊內的關閉按鈕，或者如果使用者預計點選/啟用對話方塊以將其關閉，則新增到對話方塊本身。
請勿將 tabindex 屬性新增到 <dialog> 元素，因為它不是互動式的，也不會接收焦點。對話方塊的內容，包括對話方塊中包含的關閉按鈕，可以接收焦點並進行互動。

在實現對話方塊時，重要的是要考慮設定使用者焦點的最合適位置。當使用 HTMLDialogElement.showModal() 開啟 <dialog> 時，焦點會設定到第一個巢狀的可聚焦元素上。透過使用 autofocus 屬性明確指示初始焦點位置將有助於確保初始焦點設定在被認為對於任何特定對話方塊來說是最佳初始焦點位置的元素上。如果不確定，因為可能不總是知道對話方塊內的初始焦點可以設定在哪裡，特別是對於對話方塊內容在呼叫時動態渲染的情況，<dialog> 元素本身可能提供最佳的初始焦點位置。

確保提供一種機制，允許使用者關閉對話方塊。確保所有使用者都能關閉對話方塊的最可靠方法是包含一個明確的按鈕來執行此操作，例如確認、取消或關閉按鈕。

預設情況下，透過 showModal() 方法呼叫的對話方塊可以透過按下 Esc 鍵關閉。非模態對話方塊預設情況下不會透過 Esc 鍵關閉，並且根據非模態對話方塊所代表的內容，可能不希望有此行為。鍵盤使用者期望 Esc 鍵關閉模態對話方塊；確保此行為已實現並保持。如果打開了多個模態對話方塊，按下 Esc 鍵應該只關閉最後顯示的對話方塊。使用 <dialog> 時，此行為由瀏覽器提供。

雖然可以使用其他元素建立對話方塊，但原生的 <dialog> 元素提供了可用性和輔助功能，如果您使用其他元素實現類似目的，則必須複製這些功能。如果您正在建立自定義對話方塊實現，請確保支援所有預期的預設行為並遵循正確的標籤建議。

瀏覽器以類似於使用 ARIA role="dialog" 屬性的自定義對話方塊的方式公開 <dialog> 元素。透過 showModal() 方法呼叫的 <dialog> 元素隱式具有 aria-modal="true"，而透過 show() 方法呼叫或使用 open 屬性顯示或透過更改 <dialog> 的預設 display 來顯示的 <dialog> 元素則公開為 [aria-modal="false"]。在實現模態對話方塊時，除了 <dialog> 及其內容之外的所有內容都應使用 inert 屬性呈現為非活動狀態。當將 <dialog> 與 HTMLDialogElement.showModal() 方法一起使用時，此行為由瀏覽器提供。

示例

純 HTML 對話方塊

此示例演示了僅使用 HTML 建立非模態對話方塊。由於 <dialog> 元素中的布林值 open 屬性，對話方塊在頁面載入時顯示為開啟狀態。透過單擊“OK”按鈕可以關閉對話方塊，因為 <form> 元素中的 method 屬性設定為 "dialog"。在這種情況下，無需 JavaScript 來關閉表單。

html

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

結果

注意： 重新載入頁面以重置輸出。

此對話方塊由於存在 open 屬性而最初處於開啟狀態。使用 open 屬性顯示的對話方塊是非模態的。點選“OK”後，對話方塊會被關閉，Result 幀為空。當對話方塊被關閉時，沒有提供重新開啟它的方法。因此，顯示非模態對話方塊的首選方法是使用 HTMLDialogElement.show() 方法。可以透過新增或刪除布林值 open 屬性來切換對話方塊的顯示，但這不推薦。

建立模態對話方塊

此示例演示了一個帶有漸變背景的模態對話方塊。當“顯示對話方塊”按鈕被啟用時，.showModal() 方法會開啟模態對話方塊。對話方塊可以透過按下 Esc 鍵關閉，或者當對話方塊內的“關閉”按鈕被啟用時，透過 close() 方法關閉。

當對話方塊開啟時，瀏覽器預設會將焦點放在對話方塊內第一個可聚焦的元素上。在此示例中，autofocus 屬性應用於“關閉”按鈕，使其在對話方塊開啟時獲得焦點，因為這是我們期望使用者在對話方塊開啟後立即進行互動的元素。

HTML

html

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

我們可以使用 ::backdrop 偽元素來樣式化對話方塊的背景。

css

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

JavaScript

對話方塊使用 .showModal() 方法以模態方式開啟，並使用 .close() 或 .requestClose() 方法關閉。

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

結果

當模態對話方塊顯示時，它會出現在可能存在的任何其他對話方塊之上。模態對話方塊之外的所有內容都是非活動狀態，並且對話方塊之外的互動被阻止。請注意，當對話方塊開啟時，除了對話方塊本身，無法與文件進行互動；“顯示對話方塊”按鈕大部分被對話方塊幾乎不透明的背景遮蔽，並且是惰性的。

處理對話方塊的返回值

此示例演示了 <dialog> 元素的 returnValue 以及如何使用表單關閉模態對話方塊。預設情況下，returnValue 是空字串，或者是 <dialog> 元素內提交表單的按鈕的值（如果存在）。

此示例在啟用“顯示對話方塊”按鈕時開啟一個模態對話方塊。對話方塊包含一個帶有 <select> 和兩個 <button> 元素的表單，它們預設為 type="submit"。當選擇選項更改時，事件監聽器會更新“確認”按鈕的值。如果啟用“確認”按鈕關閉對話方塊，則按鈕的當前值即為返回值。如果透過按“取消”按鈕關閉對話方塊，則 returnValue 為 cancel。

當對話方塊關閉時，返回值會顯示在“顯示對話方塊”按鈕下方。如果對話方塊透過按下 Esc 鍵關閉，returnValue 不會被更新，並且 close 事件不會發生，因此 <output> 中的文字不會更新。

HTML

html

<!-- A modal dialog containing a form -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

JavaScript

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string
});

// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // We don't want to submit this fake form
  favDialog.close(selectEl.value); // Have to send the select box value here.
});

結果

以上示例演示了關閉模態對話方塊的以下三種方法：

透過使用 dialog 方法提交對話方塊表單內的表單（如純 HTML 示例所示）。
透過按下 Esc 鍵。
透過呼叫 HTMLDialogElement.close() 方法（如模態示例所示）。在此示例中，“取消”按鈕透過 dialog 表單方法關閉對話方塊，“確認”按鈕透過 HTMLDialogElement.close() 方法關閉對話方塊。

“取消”按鈕包含 formmethod="dialog" 屬性，該屬性會覆蓋 <form> 的預設 GET 方法。當表單的方法為 dialog 時，表單的狀態會儲存但不會提交，並且對話方塊會被關閉。

如果沒有 action，透過預設的 GET 方法提交表單會導致頁面重新載入。我們使用 JavaScript 透過 event.preventDefault() 和 HTMLDialogElement.close() 方法分別阻止提交併關閉對話方塊。

在每個 dialog 元素中提供關閉機制至關重要。Esc 鍵預設情況下不會關閉非模態對話方塊，也不能假設使用者能夠訪問物理鍵盤（例如，使用觸控式螢幕裝置而無法訪問鍵盤的使用者）。

關閉帶有必填表單輸入的對話方塊

當對話方塊內的表單包含必填輸入時，使用者代理只會在您為必填輸入提供值後才允許您關閉對話方塊。要關閉此類對話方塊，可以使用關閉按鈕上的 formnovalidate 屬性，或者在單擊關閉按鈕時呼叫對話方塊物件的 close() 方法。

html

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label>
        Favorite animal:
        <input type="text" required />
      </label>
    </p>
    <div>
      <input type="submit" id="normal-close" value="Normal close" />
      <input
        type="submit"
        id="novalidate-close"
        value="Novalidate close"
        formnovalidate />
      <input type="submit" id="js-close" value="JS close" />
    </div>
  </form>
</dialog>
<p>
  <button id="show-dialog">Show the dialog</button>
</p>
<output></output>

[type="submit"] {
  margin-right: 1rem;
}

JavaScript

const showBtn = document.getElementById("show-dialog");
const dialog = document.getElementById("dialog");
const jsCloseBtn = dialog.querySelector("#js-close");

showBtn.addEventListener("click", () => {
  dialog.showModal();
});

jsCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  dialog.close();
});

結果

從輸出中，我們看到無法使用正常關閉按鈕關閉對話方塊。但是，如果我們在取消按鈕上使用 formnovalidate 屬性繞過表單驗證，對話方塊就可以關閉。透過程式設計方式，dialog.close() 也會關閉此類對話方塊。

不同 `closedby` 行為的比較

此示例演示了 closedby 屬性不同值之間的行為差異。

HTML

我們提供三個 <button> 元素和三個 <dialog> 元素。每個按鈕都將程式設計為開啟一個不同的對話方塊，演示 closedby 屬性的三個值之一的行為：none、closerequest 和 any。請注意，每個 <dialog> 元素都包含一個將用於關閉它的 <button> 元素。

html

<p>Choose a <code>&lt;dialog&gt;</code> type to show:</p>
<div id="controls">
  <button id="none-btn"><code>closedby="none"</code></button>
  <button id="closerequest-btn">
    <code>closedby="closerequest"</code>
  </button>
  <button id="any-btn"><code>closedby="any"</code></button>
</div>

<dialog closedby="none">
  <h2><code>closedby="none"</code></h2>
  <p>
    Only closable using a specific provided mechanism, which in this case is
    pressing the "Close" button below.
  </p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="closerequest">
  <h2><code>closedby="closerequest"</code></h2>
  <p>Closable using the "Close" button or the Esc key.</p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="any">
  <h2><code>closedby="any"</code></h2>
  <p>
    Closable using the "Close" button, the Esc key, or by clicking outside the
    dialog. "Light dismiss" behavior.
  </p>
  <button class="close">Close</button>
</dialog>

body {
  font-family: sans-serif;
}

#controls {
  display: flex;
  justify-content: space-around;
}

dialog {
  width: 480px;
  border-radius: 5px;
  border-color: rgb(0 0 0 / 0.3);
}

dialog h2 {
  margin: 0;
}

dialog p {
  line-height: 1.4;
}

JavaScript

這裡我們為主要控制 <button> 元素、<dialog> 元素以及對話方塊內部的“關閉” <button> 元素分配了不同的變數引用。首先，我們使用 addEventListener 為每個控制按鈕分配一個 click 事件監聽器，其事件處理函式透過 showModal() 開啟相關的 <dialog> 元素。然後，我們遍歷“關閉” <button> 引用，為每個引用分配一個 click 事件處理函式，該函式透過 close() 關閉其 <dialog> 元素。

const noneBtn = document.getElementById("none-btn");
const closerequestBtn = document.getElementById("closerequest-btn");
const anyBtn = document.getElementById("any-btn");

const noneDialog = document.querySelector("[closedby='none']");
const closerequestDialog = document.querySelector("[closedby='closerequest']");
const anyDialog = document.querySelector("[closedby='any']");

const closeBtns = document.querySelectorAll(".close");

noneBtn.addEventListener("click", () => {
  noneDialog.showModal();
});

closerequestBtn.addEventListener("click", () => {
  closerequestDialog.showModal();
});

anyBtn.addEventListener("click", () => {
  anyDialog.showModal();
});

closeBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.parentElement.close();
  });
});

結果

渲染結果如下：

嘗試點選每個按鈕開啟一個對話方塊。第一個只能透過點選其“關閉”按鈕關閉。第二個也可以透過裝置特定的使用者操作關閉，例如按下 Esc 鍵。第三個具有完整的“輕量級關閉”行為，因此它也可以透過點選或輕觸對話方塊外部關閉。

動畫對話方塊

<dialog> 在隱藏時設定為 display: none;，在顯示時設定為 display: block;，並且會被從頂層和輔助功能樹中移除/新增。因此，為了使 <dialog> 元素能夠動畫化，display 屬性需要是可動畫化的。支援的瀏覽器透過離散動畫型別的變體來動畫化 display。具體來說，瀏覽器將在 none 和 display 的另一個值之間切換，以便動畫內容在整個動畫持續時間內顯示。

所以例如：

當 display 從 none 動畫到 block（或其他可見的 display 值）時，該值將在動畫持續時間的 0% 處切換到 block，使其在整個過程中可見。
當 display 從 block（或其他可見的 display 值）動畫到 none 時，該值將在動畫持續時間的 100% 處切換到 none，使其在整個過程中可見。

注意： 使用 CSS 變換進行動畫時，需要設定 transition-behavior: allow-discrete 以啟用上述行為。此行為在使用 CSS 動畫進行動畫時預設可用；不需要等效的步驟。

過渡對話方塊元素

當使用 CSS 轉換來動畫化 <dialog> 時，需要以下功能：

@starting-style @規則: 提供一組設定在 <dialog> 上的屬性的起始值，您希望每次開啟時都從這些值進行轉換。這對於避免意外行為是必需的。預設情況下，CSS 轉換僅在可見元素的屬性值從一個值更改為另一個值時發生；它們不會在元素的首次樣式更新時觸發，也不會在 display 型別從 none 更改為另一種型別時觸發。
display 屬性: 將 display 新增到 transitions 列表中，以便在轉換期間 <dialog> 將保持為 display: block（或對話方塊開啟狀態下設定的其他可見 display 值），確保其他轉換可見。
overlay 屬性: 在 transitions 列表中包含 overlay 以確保 <dialog> 從頂層移除被推遲到過渡完成，再次確保過渡可見。
transition-behavior 屬性: 在 display 和 overlay 過渡（或在 transition 縮寫）上設定 transition-behavior: allow-discrete，以啟用這兩個預設不可動畫屬性的離散過渡。

這是一個快速示例，展示了它可能是什麼樣子。

HTML

HTML 包含一個 <dialog> 元素，以及一個顯示對話方塊的按鈕。此外，<dialog> 元素還包含另一個用於關閉自身的按鈕。

html

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

在 CSS 中，我們包含了一個 @starting-style 塊，它定義了 opacity 和 transform 屬性的過渡起始樣式，dialog:open 狀態的過渡結束樣式，以及預設 dialog 狀態的預設樣式，以便在 <dialog> 出現後過渡回該狀態。請注意 <dialog> 的 transition 列表不僅包含這些屬性，還包含 display 和 overlay 屬性，每個屬性都設定了 allow-discrete。

我們還為 <dialog> 開啟時出現在其後面的 ::backdrop 的 background-color 屬性設定了一個起始樣式值，以提供漂亮的變暗動畫。dialog:open::backdrop 選擇器僅在對話方塊開啟時選擇 <dialog> 元素的背景。

css

/* Open state of the dialog  */
dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

/* Closed state of the dialog   */
dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Before open state  */
/* Needs to be after the previous dialog:open rule to take effect,
    as the specificity is the same */
@starting-style {
  dialog:open {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}

注意： 在不支援 :open 偽類的瀏覽器中，您可以使用屬性選擇器 dialog[open] 來樣式化處於開啟狀態的 <dialog> 元素。

JavaScript

JavaScript 為顯示和關閉按鈕添加了事件處理程式，使其在點選時顯示和關閉 <dialog>。

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

結果

程式碼渲染如下：

注意： 因為 <dialog> 每次顯示時都會從 display: none 變為 display: block，所以在每次進入過渡時，<dialog> 都會從其 @starting-style 樣式過渡到 dialog:open 樣式。當 <dialog> 關閉時，它會從 dialog:open 狀態過渡到預設的 dialog 狀態。

在這種情況下，進入和退出時的樣式過渡可能會有所不同。請參閱我們的何時使用起始樣式的演示示例以證明這一點。

對話方塊關鍵幀動畫

使用 CSS 關鍵幀動畫為 <dialog> 製作動畫時，與過渡有一些值得注意的區別：

您無需提供 @starting-style。
您在關鍵幀中包含 display 值；這將是整個動畫的 display 值，或者直到遇到另一個非 none 的 display 值。
您無需顯式啟用離散動畫；關鍵幀中沒有等同於 allow-discrete 的內容。
您也不需要在關鍵幀中設定 overlay；display 動畫處理了 <dialog> 從顯示到隱藏的動畫。

我們來看一個例子，這樣你就能看到它是什麼樣子。

HTML

首先，HTML 包含一個 <dialog> 元素，以及一個顯示對話方塊的按鈕。此外，<dialog> 元素還包含另一個用於關閉自身的按鈕。

html

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

CSS 定義了關鍵幀，用於在 <dialog> 的關閉和顯示狀態之間進行動畫，以及 <dialog> 背景的淡入動畫。<dialog> 動畫包括動畫 display，以確保實際可見的動畫效果在整個持續時間內保持可見。請注意，無法動畫背景淡出——當 <dialog> 關閉時，背景會立即從 DOM 中移除，因此沒有任何可動畫的內容。

css

dialog {
  animation: fade-out 0.7s ease-out;
}

dialog:open {
  animation: fade-in 0.7s ease-out;
}

dialog:open::backdrop {
  background-color: black;
  animation: backdrop-fade-in 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }
}

@keyframes backdrop-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.25;
  }
}

body,
button {
  font-family: system-ui;
}

JavaScript

最後，JavaScript 為按鈕添加了事件處理程式，以實現顯示和關閉 <dialog> 的功能。

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

結果

程式碼渲染如下：

技術摘要

內容類別	流內容，分割槽根
允許內容	流內容
標籤省略	無，起始標籤和結束標籤都必須存在。
允許父級	任何接受流內容的元素
隱式 ARIA 角色	dialog
允許的 ARIA 角色	`alertdialog`
DOM 介面	`HTMLDialogElement`

規範

規範
HTML # the-dialog-element

瀏覽器相容性

另見

HTMLDialogElement 介面
HTMLDialogElement 介面的 close 事件
HTMLDialogElement 介面的 cancel 事件
HTMLDialogElement 介面的 open 屬性
HTML 元素的 inert 全域性屬性
::backdrop CSS 偽元素
學習區域中的 Web 表單

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 ⁨2025 年 8 月 6 日⁩。

在 GitHub 上檢視此頁面 • 報告此內容的問題