[譯]迎接新的 Dialog 元素

• 原文地址：Meet the New Dialog Element
• 原文做者：keithjgrant
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：FateZeros
• 校對者：ryouaki PCAaron

迎接新的 Dialog 元素

HTML 5.2 爲原生彈窗對話框引入了一個新的 <dialog> 元素。 乍一看，它彷佛至關簡單（原本就是），但當我和它打交道的過程當中，我發現有一些很棒的新特性很容易被忽視掉。

在本文的最後我加上了一個完整可行的 Demo ，可是若是你想在閱讀的過程當中也查看的話，你能夠看這裏.

這是一個基本的彈窗對話框標記：

<dialog open>
  Native dialog box!
</dialog>
複製代碼

open 屬性意味着對話框是可見的。沒有它，除非你用 JavaSript 使它出現，不然它就是隱藏的。在添加樣式以前，對話框渲染以下所示：

它在頁面中是絕對定位的，所以它會按照你所指望的那樣出如今其餘內容前面，而且水平居中。默認狀況下，它和內容等寬。

基本操做

JavaScript 有幾個方法和屬性能夠方便地處理 <dialog> 元素。你可能最須要的兩個方法是 showModal() 和 close() 。

const modal = document.querySelector('dialog');

// 使對話框出現（添加 `open` 屬性）
modal.showModal();

// 隱藏對話框（移除 `open` 屬性）
modal.close();
複製代碼

當你用 showModal() 打開對話框的時候，頁面會添加一層背景，阻止用戶與對話框以外的內容交互。默認狀況下，這層背景是徹底透明的，可是你能夠改變 CSS 屬性使它可見（後面會有更多介紹）。

按 Esc 鍵會關閉對話框，你也能夠提供一個關閉按鈕來觸發 close() 方法。

還有第三個方法，show() 也會讓對話框出現，但不會伴隨背景層。用戶仍能夠和對話框以外的可見的元素進行交互。

瀏覽器支持和 Polyfill

如今，只有 Chrome 支持 <dialog> 。Firefox 提供了默認樣式，可是 JavaScript API 僅在標誌後啓用。我猜測 Firefox 會很快支持它。

慶幸地是，polyfill 提供了 JavaScript 事件和默認樣式。用 npm 安裝 dialog-polyfill 來使用它 —— 或者使用經常使用的舊的 <script> 標籤。這樣 <dialog> 就能夠在 IE9及以上版本中使用了。

當使用 polyfill 時，頁面上的每一個對話框都須要被初始化：

dialogPolyfill.registerDialog(modal);
複製代碼

這不會替代擁有它的瀏覽器中的原生事件。

樣式

打開和關閉對話框完成了，可是它起初看起來並不專業。咱們像給其餘元素添加樣式那樣，給對話框添加樣式。背景層能夠用新的 ::backdrop 僞元素來設計。

dialog {
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* make the backdrop a semi-transparent black */
  background-color: rgba(0, 0, 0, 0.4);
}
複製代碼

對於那些須要使用 polyfill 的老瀏覽器，這個僞元素選擇器將不會起做用，然而，在這個對話框位置後，polyfill 會當即添加一個 .backdrop 元素。你能夠像這樣用 CSS 來定位它：

dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
複製代碼

添加更多的標記來提供樣式的鉤子。一個經常使用的作法是將對話框劃分爲標題，正文和頁腳：

<dialog id="demo-modal">
  <h3 class="modal-header">A native modal dialog box</h3>
  <div class="modal-body">
    <p>Finally, HTML has a native dialog box element! This is fantastic.</p>
    <p>And a polyfill makes this usable today.</p>
  </div>
  <footer class="modal-footer">
    <button id="close" type="button">close</button>
  </footer>
</dialog>
複製代碼

給它添加一些 CSS ，你可讓對話框作成任何你想要的外觀：

更多控制

一般，咱們想要從對話框中得到更多用戶反饋。當關閉對話框時，你能夠傳遞一個字符串值到 close() 方法。該值將會被賦值給對話框 DOM 元素的 retrunValue屬性，所以它能夠在後面被讀取到：

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`
複製代碼

還有一些事件你能夠監聽。兩個有用的事件是 close （當對話框關閉的時候觸發）和 cancel （當用戶按了 Esc 關閉對話框時觸發）。

有一件事彷佛被忘掉了，當背景層被點擊時可以關閉對話框，但有一個變通方案。當點擊背景層時，觸發 <dialog> 的點擊事件做爲事件目標。而且，若是你構造對話框使得子元素填充了整個對話框，那些子元素將會被做爲對話框內任何點擊的目標。這種方式，你能夠監聽對話框上的點擊，當點擊事件的目標是對話框自己的時候關閉它：

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});
複製代碼

雖然不完美，可是起了做用。若是你找到了更好的方法來檢測背景層上的點擊，請讓我知道。

完整可行的 Demo

我在下面的示例中演示了不少東西。親自實踐下，看你還能用 <dialog> 作些什麼。它包含了 polyfill，因此它應該能在大多數瀏覽器中運行。

請參閱 Keith J. Grant (@keithjgrant) 在 CodePen 上的 。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。