HTML教程-HTML<dialog>标签

HTML <dialog>标签用于在网页上创建一个新的弹出对话框。该标签表示对话框或其他交互组件，比如窗口。

<dialog>元素使用一个名为open的布尔属性，激活元素并使用户可以与之交互。

HTML <dialog>是HTML5中引入的新标签。

HTML <dialog>标签示例

<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>

输出:

Show Dialog

HTML <dialog>标签还支持HTML中的全局属性和事件属性。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<dialog>	是	是	是	是	是