2023年12月24號， html5.2 標準固化，也代表著移動端進入 html5.3 規劃階段，雖然 html5.2 固化了，但內部的一些新規範，在移動端的瀏覽器中的支程式設計客棧持性還有待提高，這裡我們來看乙個算是常用的新被納入標準的標籤吧，它就是 dialog 標籤。
1. 寫在前面
說起 dialog 標籤，可能很多人都比較陌生，畢竟這個標籤直到 html5.2 標準固定，也只是 chrome 的瀏覽器才支援的，那至於該標籤的用處，根據語義也可以很明顯的理解到，會話。
這裡我們可能會想到的是， alert ， confirm 等彈窗，是的，它們是同乙個家族的，都是彈出框，接下來我們就簡單的看看， dialog 標籤的一些屬性與使用場景。
2. 標籤使用
content
既然是標籤，那麼其實與我們常用的 div ， p 等標籤一樣，如上面的示例**所示，其內部支援任意的其他元素。
這裡，你可能會注意到，在上面的示例**中的 open 屬性，是的，這個是用來控制這個彈窗的顯示和隱藏的，當然，你也可以任性的使用 css 來控制，只是那樣在一些裝置的輔助功能時（比如無障礙訪問，讀屏軟體等），就會出現異常了，所以建議還是使用標準中的顯示與隱藏功能。
3. 支援的預設方法
首先， dialog 標籤是 htmldialogelement 的乙個示例，繼承自 htmlelement ，所以，它與div這一的標籤是屬於同層次的標籤，唯一不同的是，它比div有更多的預設功能，這一小節，我們就來看看， dialog 有哪些預設的方法供我們使用。
var dialog = document.getelementbyid("dialog");
// 假設頁面中，有一程式設計客棧個id=dialog的dialog標籤
// 關閉dialog
dialog.close();
// 以toast的形式顯示dialog
dialog.show();
// 以模態框的形式顯示dialog
diawww.cppcns.comlog.showmodal();
// dialog.close()呼叫時傳入的引數值
dialog.returnvlaue;
// dialog的顯示狀態
dialog.open;
你可以自己www.cppcns.com先去示例中，操作一下，然後看看有哪些特色，然後再回來對比一下，接下來的總結：
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/www.cppcns.comfalse 。
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 的機制（也許已經有這套實現方案了，這裡就不去找了）。
本文標題: html5.2 dialog簡介詳解
本文位址:
html導航框架簡析
框架可以實現在同一瀏覽器視窗，瀏覽不同的頁面。乙個頁面的超連結一般跳轉到乙個新的瀏覽器視窗，而導航框架可以通過超連結在同一視窗顯示不同的頁面。接下來展示一下導航鏈結的實現。1.主頁面，將頁面分為兩欄，其中index.html包括三個超連結，即導航框架包含乙個將第二個框架作為目標的鏈結列表。2.ind...
初識HTML5 2 繪畫的原理
在 畫布 一文中，我們已經初步認識了html5 的canvas,今天我們就要來聊聊如何畫畫了。在畫畫之前，我們必須要先認識乙個東東 the coordinate system 座標系統 如下圖所示 相信大家還記得我們之前提到過繪畫平面的預設大小是300px 150px嗎？恩，相信大家對座標軸不會陌生...
最簡法從硬碟安裝Centos5 2
3,修改c boot.ini檔案的屬性,去除唯讀屬性,修改之,在最後一行增加 c grldr grub4dos,儲存並恢復boot.ini檔案的唯讀屬性.4,重啟電腦,選擇啟動選單最後一項grub4dos,進入grub 提示符狀態 如果硬碟已經是grub啟動,則先選擇進dos的分支,再在出現的win...