?
このドキュメントでは、 php中國語ネットマニュアル リリース
HTML<dialog>元素表示一個對話框或其他交互式組件，例如一個檢查員或窗口。
內(nèi)容類別 | 流量內(nèi)容，切片根 |
|---|---|
允許的內(nèi)容 | 流量內(nèi)容 |
標記遺漏 | 沒有，起始和結(jié)束標簽都是強制性的。 |
允許父母 | 任何接受流內(nèi)容的元素 |
允許ARIA角色 | alertdialog |
DOM界面 | HTMLDialogElement |
屬性
這個元素包含全局屬性。該tabindex屬性不能在<dialog>元素上使用。
open表示該對話框處于活動狀態(tài)并可用于交互。當open屬性沒有設置時，不應該向用戶顯示。
使用說明
<form>通過用屬性指定元素，可以將元素集成到對話框中method="dialog"。當提交這樣的表單時，對話框被關(guān)閉，其returnValue屬性被設置為所value使用的提交按鈕。
::backdropCSS偽元素使用在<dialog>元素之后，例如, 在模式對話框處于活動狀態(tài)時使無法訪問的內(nèi)容變暗。
示例
簡單的例子
<dialog open> <p>Greetings, one and all!</p></dialog>
高級示例
當單擊“更新詳細信息”按鈕時，此示例打開一個包含一個表單的彈出對話框。
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(); });})();運行結(jié)果
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
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 |