2017年12月24號， HTML5.2 標準固化，也代表行動端進入HTML5.3 規劃階段，雖然HTML5.2 固化了，但內部的一些新規範，在行動端的瀏覽器中的支援性還有待提高，這裡我們來看一個算是常用的新被納入標準的標籤吧，它就是dialog 標籤。
1. 寫在前面說起dialog 標籤，可能很多人都比較陌生，畢竟這個標籤直到HTML5.2 標準固定，也只是chrome 的瀏覽器才支持的，那至於該標籤的用處，根據語義也可以很明顯的理解到，會話。
這裡我們可能會想到的是， alert ， confirm 等彈跳窗，是的，它們是同一個家族的，都是彈出框，接下來我們就簡單的看看， dialog 標籤的一些屬性與使用場景。
2. 標籤使用<dialog open=> <h2>Title</h2> <p>Content</p></dialog>
既然是標籤，那麼其實與我們常用的div ， p 等標籤一樣，如上面的範例程式碼所示，其內部支援任意的其他元素。
這裡，你可能會注意到，在上面的範例程式碼中的open 屬性，是的，這個是用來控制這個彈跳窗的顯示和隱藏的，當然，你也可以任性的使用css 來控制，只是那樣在當一些裝置的輔助功能時（例如無障礙訪問，讀取螢幕軟體等），就會出現異常了，所以建議還是使用標準中的顯示與隱藏功能。
3. 支援的預設方法首先， dialog 標籤是HTMLDialogElement 的範例，繼承自HTMLElement ，所以，它與div這一的標籤是屬於同層次的標籤，唯一不同的是，它比div有更多的預設功能，這一小節，我們就來看看， dialog 有哪些預設的方法可以讓我們使用。
var dialog = document.getElementById(dialog);// 假設頁面中，有一個id=dialog的dialog標籤// 關閉dialogdialog.close();// 以toast的形式顯示dialogdialog.show();// 以模態框的形式顯示dialogdialog.showModal();// dialog.close()呼叫時傳入的參數值dialog.returnVlaue;// dialog的顯示狀態dialog.open;
你可以自己先去範例中，操作一下，然後看看有哪些特色，然後再回來比較一下，接下來的總結：
1： close 方法，可以多次被調用，即便是隱藏狀態，也可以再次被調用。
2： close 可以傳入一個變量，這個變數必須是字串，在returnVlaue 中表現。
3： show 方法，也可以多次被調用，即使在隱藏狀態，不會有任何問題。
4： show 方法，不會改變toast 的位置，彈出框原本在什麼位置， show 方法呼叫之後，依然在原有的位置。
5： show 方法，顯示位置緊鄰前一個元素後面，居中，沒有背後的遮罩層， z-index 的顯示方式與relative 不設定z-index 的類似（如果在此之前，沒有調用過showModal 的話）。
6： 如果呼叫過showModal 後，那麼show 方法後，元素顯示在showModal 顯示的位置，不會變動（即使內容高度變化了很多）。
7： 如果有兩個dialog 元素，都呼叫show 方法，在html 結構中，後面的dialog 會永遠覆蓋在前面的那個上層（不管那個dialog 先呼叫了show 方法）。
8： showModal 的顯示，背後會有遮罩層，顯示層級是瀏覽器webview 等級的，怎麼理解呢，你可以設定一個元素，等級非常高，在使用showModal 顯示出dialog 屬性後， dialog 都是在最前面的，這點特別適合做模態框，肯定不會在彈出框出現之後，出現層級混亂的情況。
9： showModal 只能調用一次，這裡的一次是說，如果dialog 在顯示狀態，那麼在再次調用showModal ，就會報錯，並且不能直接執行，或者說，只要open 屬性存在的情況下，再次調用，都會報錯，所以還是使用預設的open 屬性來做dialog 的顯示隱藏比較好。
10： 如果頁面上有兩個dialog 元素，都在呼叫showModal 方法的話，不論他們在HTML 中的結構，後面呼叫的dialog 的層級會高於先前呼叫的dialog 的層級。
11： dialog.returnVlaue 的取值，是dialog.close(string) 呼叫時傳入的值，只支援字串，只有在dialog 的顯示的情況下，呼叫dialog.close 傳入的值，才有效。
12： 如果一直沒有在close 中傳值，那麼returnVlaue 的值為空，如果某次傳值dialog.close(1) ，再下次show 之後， dialog.close() 關閉， returnVlaue 依然等於1。
13： open 的回傳值是： true/false 。
4. 支援的預設事件dialog 還有一個好處就是，它支援出click 等基礎事件之外的，額外兩個針對於dialog 的特殊事件：
var dialog = document.getElementById(dialog);// 假設頁面中，有一個id=dialog的dialog標籤// 當呼叫close方法時dialog.onclose = function(){};// 當在pc端按下esc按鍵時。不過在chrome版本之後，好像不管用了。 dialog.oncancel = function(){};現在來看一個範例： dialog 事件範例展示。
也有幾個問題，這裡來列舉：
1： 只要呼叫dialog.close() 來隱藏的dialog ，才能觸發onclose 事件。
2： cancel 事件觸發之後，必定會繼續觸發close 事件， chrome64 版本之後， cancel 的觸發，不是esc 按鍵了。
3： 如果有多種關閉dialog 的按鈕，那麼在每次呼叫close 的時候傳入不同的值，在close 事件的回調裡面，使用returnVlaue 的取值，來判斷，是哪個按鈕用來觸發的關閉事件。
5. 其他前面把dialog 的一些表現進了說明，可能有不全，不準確的情況，也可能隨著時間的推移，有更新的特性出現，歡迎提出補充。
在看前面的範例時，我們也看到了一下不足的地方，例如：樣式特別醜，關於這點，我們可以完全使用CSS把樣式reset掉，不影響語義，和其他的任何東西，放心重構就可以了。
這裡只是想說一下， dialog 的表現，所以就不做這些了。
6. 總結dialog 畢竟屬於彈跳窗對話的語義化標籤，並且有一些獨有的優勢（例如webview 層級的高度），雖然現在只是chrome支持，但對於以後的使用，依然是很看好的，甚至現在也可以自己兼容一下，在其他瀏覽器，自己去實作一套dialog 的機制（也許已經有這套實作方案了，這裡就不去找了）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。