HTML对话框标签

本文概述

HTML <dialog>标记用于在网页上创建新的弹出对话框。此标记表示对话框或其他交互式组件, 例如window。

<dialog>元素使用一个名为open的布尔属性, 该属性激活元素并方便用户与其交互。

HTML对话框是HTML5中引入的新标签。


HTML对话框标签示例

<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I am saying. 
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog = document.getElementById('myFirstDialog');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog.close();  
    };  
})(); 
</script>

立即测试

输出:


HTML对话框标记还支持HTML中的全局和事件属性。


支持的浏览器

Element Chrome IE Firefox Opera Safari
<dialog> Yes Yes Yes Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?