一塊兒來看 HTML 5.2 中新的原生元素

原文地址：Meet the New Dialog Element
做者：Keith

不到一個月前， HTML 5.2 正式成爲 W3C 的推薦標準（ REC）,其中，推出了一個新的原生模態對話框元素 <dialog>，乍一看，可能感受它就是一個新增的元素，然而，做者最近在玩的時候，發現它確實是一個值得期待和頗有意思的元素，在這裏分享給你們

這是 <diglog> 最基礎的示例

<dialog open>
    Native dialog box!
</dialog>

其中，open 屬性表示此時 dialog 是可見的，若是沒有 open，dialog 將會隱藏，你可使用 JavaScipt 將它顯現出來，此時，dialog 渲染以下

它 絕對定位 於頁面之上，就如咱們指望的同樣，出如今內容的上方，而且 水平居中，默認狀況下，它 和內容同樣寬

基本操做

JavaScipt 有幾個 方法 和 屬性 能夠很方便地處理 dialog 元素，使用最多的可能仍是 showModal() 和 close()

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

// makes modal appear (adds `open` attribute)
modal.showModal();

// hides modal (removes `open` attribute)
modal.close();

當你使用 showModal() 來打開 dialog 時，將會在 dialog 周圍加一層陰影，阻止用戶與 非 diglog 元素的交互，默認狀況下，陰影是 徹底透明 的，你可使用 CSS 來修改它

按 Esc 能夠關閉 dialog，你也能夠提供一個按鈕來觸發 close()

還有一個方法是 show()，它也可讓 dialog 顯現，但與 showModal() 不一樣的是它沒有陰影，用戶能夠與非 dialog 元素進行交互

瀏覽器支持和 Polyfill

目前，只有 chrome 支持 <dialog>，Firefox 須要在 about:config 裏容許 dom.dialog_element.enabled 才能正常使用，我猜測，Firefox 在不久的未來就會支持

上圖爲 caniuse.com 關於 dialog 特性主流瀏覽器的兼容狀況

幸運的是，咱們可使用 dialog-polyfill 來緩解這種尷尬，它既提供了 JavaScript 的行爲，也包含了默認的樣式，咱們可使用 npm 來安裝它，也可使用 <script> 標籤來引用它。目前，它已支持各主流瀏覽器，包括 IE 9 及其以上版本

只是，在使用它時，每一個 dialog 須要使用下面語句進行初始化

dialogPolyfill.registerDialog(dialog);

而且，它並不會取代瀏覽器原生的行爲

樣式

打開和關閉模態框是最基本的，但這是確定不夠的，<dialog> 最開始時樣式是不怎麼好看的，所以，咱們須要自定義它的樣式，此外，咱們能夠經過設置僞元素 ::backdrop 來優化 <dialog> 顯現時背影的樣式

dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

爲了兼容老的瀏覽器，使用 polyfill 時，::backdrop 是不起做用的，但 polyfill 會在 dialog 後面添加一個 .backdrop 元素，咱們能夠像下面這樣定位它

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

接下來，是時候向 bialog 裏添加更多的內容，通常包括 header， body 和 footer

<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

最後，在添加一些 CSS，你就能獲得你想要的

進階操做

一般，咱們指望能從 dialog 中獲取一些用戶的信息。關閉 dialog 時，咱們能夠給 close() 傳遞一個 string，而後經過 dialog 元素的 returnValue 屬性來獲取

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

固然，還存在額外的事件咱們能夠監聽，其中，最經常使用的多是 close（關閉 dialog 時觸發），還有 cancel （用戶按 Esc 關閉 dialog 時觸發）

此外，咱們可能還指望點擊 dialog 旁邊的陰影來關閉，固然，這也是有解決辦法的。點擊陰影會觸發 dialog 的點擊事件，若是 dialog 的子元素佔滿了整個 dialog，那麼咱們能夠經過監聽 dialog 的點擊，當 target 爲 modal 時來關閉它

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

固然，這不是完美的，但它確實是有效的，若是你有更好的方式，歡迎在評論中交流

總結

說了這麼多，不如本身實際演練一番，做者也作了一個 demo，歡迎參考