首頁 > 文章 > web前端 > html5 dialog使用詳解

html5 dialog使用詳解

小云云原創: 2018-03-01 09:18:316302瀏覽

1. 寫在前面

說起dialog 標籤，可能很多人都比較陌生，畢竟這個標籤直到HTML5.2 標準固定，也只是chrome 的瀏覽器才支持的，那至於該標籤的用處，根據語義也可以很明顯的理解到，會話。

這裡我們可能會想到的是， alert ， confirm 等彈跳窗，是的，它們是同一個家族的，都是彈出框，接下來我們就簡單的看看， dialog 標籤的一些屬性與使用場景。

2. 標籤使用

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

既然是標籤，那麼其實與我們常用的p ， p 等標籤一樣，如上面的範例程式碼所示，其內部支援任意的其他元素。

這裡，你可能會注意到，在上面的範例程式碼中的open 屬性，是的，這個是用來控制這個彈跳窗的顯示和隱藏的，當然，你也可以任性的使用css來控制，只是那樣在一些設備的輔助功能時（例如無障礙訪問，讀屏軟體等），就會出現異常了，所以建議還是使用標準中的顯示與隱藏功能。

3. 支援的預設方法

首先， dialog 標籤是HTMLDialogElement 的一個範例，繼承自HTMLElement ，所以，它與p這一的標籤是屬於同層次的標籤，唯一不同的是，它比p有更多的預設功能，這一小節，我們就來看看， dialog 有哪些預設的方法供我們使用。

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.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 的機制（也許已經有這套實現方案了，這裡就不去找了）。

html5 dialog使用詳解

相關文章