?
This document uses PHP Chinese website manual Release
HTML<dialog>元素表示一個(gè)對(duì)話框或其他交互式組件，例如一個(gè)檢查員或窗口。
內(nèi)容類別 | 流量?jī)?nèi)容，切片根 |
|---|---|
允許的內(nèi)容 | 流量?jī)?nèi)容 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父母 | 任何接受流內(nèi)容的元素 |
允許ARIA角色 | alertdialog |
DOM界面 | HTMLDialogElement |
屬性
這個(gè)元素包含全局屬性。該tabindex屬性不能在<dialog>元素上使用。
open表示該對(duì)話框處于活動(dòng)狀態(tài)并可用于交互。當(dāng)open屬性沒有設(shè)置時(shí)，不應(yīng)該向用戶顯示。
使用說明
<form>通過用屬性指定元素，可以將元素集成到對(duì)話框中method="dialog"。當(dāng)提交這樣的表單時(shí)，對(duì)話框被關(guān)閉，其returnValue屬性被設(shè)置為所value使用的提交按鈕。
::backdropCSS偽元素使用在<dialog>元素之后，例如, 在模式對(duì)話框處于活動(dòng)狀態(tài)時(shí)使無法訪問的內(nèi)容變暗。
示例
簡(jiǎn)單的例子
<dialog open> <p>Greetings, one and all!</p></dialog>
高級(jí)示例
當(dāng)單擊“更新詳細(xì)信息”按鈕時(shí)，此示例打開一個(gè)包含一個(gè)表單的彈出對(duì)話框。
HTML
<!-- Simple pop-up dialog box, containing a form --><dialog open id="favDialog"> <form method="dialog"> <section> <p><label for="favAnimal">Favorite animal:</label> <select id="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form></dialog><menu> <button id="updateDetails">Update details</button></menu>
JavaScript
(function() { var updateButton = document.getElementById('updateDetails'); var cancelButton = document.getElementById('cancel'); var favDialog = document.getElementById('favDialog'); // Update button opens a modal dialog
updateButton.addEventListener('click', function() {
favDialog.showModal(); }); // Form cancel button closes the dialog box
cancelButton.addEventListener('click', function() {
favDialog.close(); });})();運(yùn)行結(jié)果
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
HTML Living Standard該規(guī)范中'<dialog>'的定義。 | 生活水平 | |
HTML 5.1該規(guī)范中'<dialog>'的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 37 | No support1 | No support | 24 | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 37 | No support | No support | No support | No support |