html5中dialog的使用方法？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)業(yè)務(wù)包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、電子商務(wù)型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)(多語言)、商城建設(shè)、專業(yè)公司、全網(wǎng)營銷推廣等。效率優(yōu)先，品質(zhì)保證，用心服務(wù)是我們的核心價值觀，我們將繼續(xù)以良好的信譽為基礎(chǔ)，秉承穩(wěn)固與發(fā)展、求實與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)！

1. 寫在前面

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

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

2. 標(biāo)簽使用

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

既然是標(biāo)簽，那么其實與我們常用的 p ， p 等標(biāo)簽一樣，如上面的示例代碼所示，其內(nèi)部支持任意的其他元素。

這里，你可能會注意到，在上面的示例代碼中的 open 屬性，是的，這個是用來控制這個彈窗的顯示和隱藏的，當(dāng)然，你也可以任性的使用 css 來控制，只是那樣在一些設(shè)備的輔助功能時（比如無障礙訪問，讀屏軟件等），就會出現(xiàn)異常了，所以建議還是使用標(biāo)準(zhǔn)中的顯示與隱藏功能。

3. 支持的默認(rèn)方法

首先， dialog 標(biāo)簽是 HTMLDialogElement 的一個示例，繼承自 HTMLElement ，所以，它與p這一的標(biāo)簽是屬于同層次的標(biāo)簽，唯一不同的是，它比p有更多的默認(rèn)功能，這一小節(jié)，我們就來看看， dialog 有哪些默認(rèn)的方法供我們使用。

var dialog = document.getElementById("dialog");
// 假設(shè)頁面中，有一個id=dialog的dialog標(biāo)簽

// 關(guān)閉dialog
dialog.close();

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

// 以模態(tài)框的形式顯示dialog
dialog.showModal();

// dialog.close()調(diào)用時傳入的參數(shù)值
dialog.returnVlaue;

// dialog的顯示狀態(tài)
dialog.open;

你可以自己先去示例中，操作一下，然后看看有哪些特色，然后再回來對比一下，接下來的總結(jié)：

1： close 方法，可以多次被調(diào)用，即便是隱藏狀態(tài)，也可以再次被調(diào)用。

2： close 可以傳入一個變量，這個變量必須是字符串，在 returnVlaue 中表現(xiàn)。

3： show 方法，也可以多次被調(diào)用，即便在隱藏狀態(tài)，不會有任何問題。

4： show 方法，不會更改 toast 的位置，彈出框原本在什么位置， show 方法調(diào)用之后，依然在原有的位置。

5： show 方法，顯示位置緊挨著前一個元素后面，居中，沒有背后的遮罩層， z-index 的顯示方式與 relative 不設(shè)置 z-index 的類似（如果在此之前，沒有調(diào)用過 showModal 的話）。

6： 如果調(diào)用過 showModal 后，那么 show 方法后，元素顯示在 showModal 顯示的位置，不會變動（即便內(nèi)容高度變化了很多）。

7： 如果有兩個 dialog 元素，都調(diào)用 show 方法，在 html 結(jié)構(gòu)中，后面的 dialog 會永遠(yuǎn)覆蓋在前面的那個上層（不管那個 dialog 先調(diào)用了 show 方法）。

8： showModal 的顯示，背后會有遮罩層，顯示層級是瀏覽器 webview 級別的，怎么理解呢，你可以設(shè)置一個元素，級別非常高，在使用 showModal 顯示出 dialog 屬性后， dialog 都是在最前面的，這一點特別適合做模態(tài)框，肯定不會在彈出框出現(xiàn)之后，出現(xiàn)層級混亂的情況。

9： showModal 只能調(diào)用一次，這里的一次是說，如果 dialog 在顯示狀態(tài)，那么在再次調(diào)用 showModal ，就會報錯，并且不能直接執(zhí)行，或者說，只要 open 屬性存在的情況下，再次調(diào)用，都會報錯，所以還是使用默認(rèn)的 open 屬性來做 dialog 的顯示隱藏更好。

10： 如果頁面上有兩個 dialog 元素，都在調(diào)用 showModal 方法的話，不論他們在 HTML 中的結(jié)構(gòu)，后調(diào)用的 dialog 的層級會高于之前調(diào)用的 dialog 的層級。

11： dialog.returnVlaue 的取值，是 dialog.close(string) 調(diào)用時傳入的值，只支持字符串，只有在 dialog 的顯示的情況下，調(diào)用 dialog.close 傳入的值，才有效。

12： 如果一直沒有在 close 中傳值，那么 returnVlaue 的值為空，如果某次傳值 dialog.close("1") ，再下次 show 之后， dialog.close() 關(guān)閉， returnVlaue 依然等于“1”。

13： open 的返回值是： true/false 。

4. 支持的默認(rèn)事件

dialog 還有一個好處就是，它支持出 click 等基礎(chǔ)事件之外的，額外兩個針對于 dialog 的特殊事件：

var dialog = document.getElementById("dialog");
// 假設(shè)頁面中，有一個id=dialog的dialog標(biāo)簽

// 當(dāng)調(diào)用close方法時
dialog.onclose = function(){};

// 當(dāng)在pc端按下esc按鍵時。不過在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

現(xiàn)在來看一個示例： dialog 事件示例展示。

也有幾個問題，這里來列舉一下：

1： 只要調(diào)用 dialog.close() 來隱藏的 dialog ，才能觸發(fā) onclose 事件。

2： cancel 事件觸發(fā)之后，必定會繼續(xù)觸發(fā) close 事件， chrome64 版本之后， cancel 的觸發(fā)，不是 esc 按鍵了。

3： 如果有多種關(guān)閉 dialog 的按鈕，那么在每次調(diào)用 close 的時候傳入不同的值，在 close 事件的回調(diào)里面，使用 returnVlaue 的取值，來判斷，是哪個按鈕用來觸發(fā)的關(guān)閉事件。

5. 其他

前面把 dialog 的一些表現(xiàn)進(jìn)了說明，可能有不全，不準(zhǔn)確的情況，也可能隨著時間的推移，有更新的特性出現(xiàn)，歡迎提出補(bǔ)充。

在看前面的示例時，我們也看到了一下不足的地方，比如：樣式特別丑，關(guān)于這點，我們可以完全使用CSS把樣式reset掉，不影響語義，和其他的任何東西，放心重構(gòu)就可以了。

這里只是想說一下， dialog 的表現(xiàn)，所以就不做這些了。

6. 總結(jié)

dialog 畢竟屬于彈窗對話的語義化標(biāo)簽，并且有一些獨有的優(yōu)勢（比如 webview 層級的高度），雖然現(xiàn)在只是chrome支持，但對于以后的使用，依然是很看好的，甚至現(xiàn)在也可以自己兼容一下，在其他瀏覽器，自己去實現(xiàn)一套 dialog 的機(jī)制（也許已經(jīng)有這套實現(xiàn)方案了，這里就不去找了）。

關(guān)于html5中dialog的使用方法問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道了解更多相關(guān)知識。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：html5中dialog的使用方法-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.rwnh.cn/article30/ehcso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、外貿(mào)建站、網(wǎng)站排名、移動網(wǎng)站建設(shè)、服務(wù)器托管、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)