html中的dialog怎么用

這篇文章主要介紹“html中的dialog怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html中的dialog怎么用”文章能幫助大家解決問題。

1. 寫在前面

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

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

2. 標簽使用

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

既然是標簽，那么其實與我們常用的 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
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 的取值，來判斷，是哪個按鈕用來觸發的關閉事件。

關于“html中的dialog怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。