html5.2中怎么使用dialog標(biāo)簽

這篇文章主要為大家展示了html5.2中怎么使用dialog標(biāo)簽，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“html5.2中怎么使用dialog標(biāo)簽”這篇文章吧。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、石泉ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的石泉網(wǎng)站制作公司

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。

2017年12月24號(hào)， HTML5.2 標(biāo)準(zhǔn)固化，也代表著移動(dòng)端進(jìn)入 HTML5.3 規(guī)劃階段，雖然 HTML5.2 固化了，但內(nèi)部的一些新規(guī)范，在移動(dòng)端的瀏覽器中的支持性還有待提高，這里我們來(lái)看一個(gè)算是常用的新被納入標(biāo)準(zhǔn)的標(biāo)簽吧，它就是 dialog 標(biāo)簽。

1. 寫(xiě)在前面

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

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

2. 標(biāo)簽使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在來(lái)看一個(gè)示例： dialog 事件示例展示。

也有幾個(gè)問(wèn)題，這里來(lái)列舉一下：

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

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

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

5. 其他

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

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

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

以上就是關(guān)于“html5.2中怎么使用dialog標(biāo)簽”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱(chēng)欄目：html5.2中怎么使用dialog標(biāo)簽
標(biāo)題鏈接：http://muchs.cn/article32/gecpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站制作、小程序開(kāi)發(fā)、自適應(yīng)網(wǎng)站、虛擬主機(jī)、ChatGPT

廣告

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