这篇翻译不完整。请帮忙从英语翻译这篇文章。
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
HTMLDialogElement
接口提供操作<dialog>
元素的方法.。此接口的方法和属性继承自 HTMLElement
接口。
属性
继承自父接口, HTMLElement
。
名称 | 类型 | 描述 |
---|---|---|
open |
Boolean |
来自open HTML 属性, 表示这个对话框可以进行互动. |
returnValue |
DOMString |
用户获取对话框的值 |
方法
继承自父接口 , HTMLElement
。
名称和参数 | 类型 | 描述 |
---|---|---|
close() HTML5 |
void |
关闭对话框。 可选传入类型为{domxref("DOMString")}}的参数,用来更新对话框的returnValue。 |
show() HTML5 |
void |
非模式化的显示这个对话框, 即:打开这个对话框之后依然可以和其他内容进行交互。 可选传入类型为 Element 或者 MouseEvent 的参数,用来定义对话框的显示位置。 |
showModal() HTML5 |
void |
模式化的显示这个对话框, 并且将会至于所有其他对话框的顶层(屏蔽其他对话框的交互)。 可选传入类型为Element 或者 MouseEvent 的参数, 用来定义对话框的显示位置。 |
Examples
Example 1
<!-- Anchor point example --> <dialog id="bronteDialog"> <p>That was part of a poem by Emily Brontë!</p> </dialog> <blockquote> <p>"Then art thou glad to seek repose?<br> Art glad to leave the sea,<br> And <strong id="anchor">anchor</strong> all thy weary woes<br> In calm Eternity?"</p> </blockquote> <menu> <button id="showDialogButton">Show dialog</button> </menu> <script> (function() { var showDialogButton = document.getElementById('showDialogButton'); // 'Show dialog' button opens dialog, anchored at third line of quote showDialogButton.addEventListener('click', function() { var bronteDialog = document.getElementById('bronteDialog'); var anchorPoint = document.getElementById('anchor'); bronteDialog.show(anchorPoint); }); })(); </script>
Example 2
<!-- Simple pop-up dialog box, containing a form --> <dialog id="favDialog"> <form method="dialog"> <section> <p><label for="favAnimal">Favorite animal:</label> <select id="favAnimal" name="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> <script> (function() { var updateButton = document.getElementById('updateDetails'); var cancelButton = document.getElementById('cancel'); // Update button opens a modal dialog updateButton.addEventListener('click', function() { document.getElementById('favDialog').showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { document.getElementById('favDialog').close(); }); })(); </script>
规范
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard <dialog> |
Living Standard | |
HTML5.1 <dialog> |
Working Draft |
浏览器兼容性
特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 37 | 未实现 bug 840640 | 未实现 | 24 | 未实现 |
Anchor points | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
特性 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
Anchor points | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
See also
- The HTML element implementing this interface:
<dialog>
.