❌之前：

看看我創(chuàng)建一個(gè)對(duì)話框要花費(fèi)多少功夫👇。僅 CSS 就有近 20 行：

這還只是用于對(duì)話框功能的 CSS，它看起來仍然非?；荆?/span>

但是，使用新的 <dialog> 標(biāo)簽又如何呢？

✅ 現(xiàn)在：

<button id="open">Open</button>
<dialog id="dialog">
  ⚡ Lighting strikes the earth 44 times every second!
  ⚡ 閃電每秒擊中地球44次！
</dialog>

JS:

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');

open.addEventListener('click', () => {
  dialog.showModal();
});

我們甚至可以使用 show() 方法來顯示非模式對(duì)話框--沒有背景，干擾較少：

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');

open.addEventListener('click', () => {
  // ✅ show() 方法
  dialog.show();
});

對(duì)話框一直是強(qiáng)力吸引用戶注意力并向其傳遞信息的有力方式。

從 Material Design 到 Fluent Design，它一直是每個(gè)用戶界面設(shè)計(jì)系統(tǒng)的主打功能。

但是，即使它們再常見，我們也不得不借助第三方庫或創(chuàng)建自定義組件來使用它們。

其中許多圖書館甚至沒有遵循關(guān)于可用性和可訪問性的官方建議......

例如：按 Escape 鍵應(yīng)該可以解除頁面上的對(duì)話框，但許多自定義對(duì)話框都不會(huì)這樣做。

因此， <dialog> 改變了這一切。

自動(dòng)打開對(duì)話框

open 屬性使對(duì)話框從打開頁面的那一刻起就一直處于打開狀態(tài)：

<dialog id="dialog" open>
  長頸鹿比人類更有可能被閃電擊中。事實(shí)上，它們的可能性是人類的30倍。
</dialog>

自動(dòng)關(guān)閉按鈕

是的，可以使用標(biāo)準(zhǔn)事件偵聽器和 close() 方法添加關(guān)閉功能：

const close = document.querySelector('#dialog .close');

close.addEventListener('click', () => {
  dialog.close();
});

但是內(nèi)置的 <dialog> 可以讓這一切變得更加簡單--無需 JavaScript：

<dialog id="dialog">
  ⚡ 在 codingbeautydev.com 獲取基本的編碼技能和知識(shí)
  <br />
  <form method="dialog">
    <button class="close">關(guān)閉</button>
  </form>
</dialog>

如何正確設(shè)計(jì) <dialog> 樣式

<dialog> 有一個(gè)特殊的 ::backdrop 偽元素，用于設(shè)計(jì)背景墻的樣式：

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

主要元素的樣式簡單明了：

dialog {
  background-color: black;
  color: white;
}

最后

有了新的 HTML <dialog> 標(biāo)記，在我們的網(wǎng)絡(luò)應(yīng)用程序中創(chuàng)建模式和對(duì)話框變得前所未有的簡單和快捷。