3.png

HTMl5新的版本出现了一个有意思的标签，是我比较中意的，那就是对话窗或窗口，也就是dialog

# 基本用法
<dialog open>
  // somthing ...
</dialog>

open：规定 dialog 元素是活动的，用户可与之交互。
表示这个对话框可以进行互动.

兼容性(本篇文章使用chrome测试)

image.png

image.png

HTMLDialogElement

• close()

关闭对话框。 可选传入类型为{domxref("DOMString")}}的参数，用来更新对话框的returnValue。摘自MDN

• open()

非模式化的显示这个对话框, 即：打开这个对话框之后依然可以和其他内容进行交互。 可选传入类型为 Element 或者 MouseEvent 的参数，用来定义对话框的显示位置。摘自MDN

• showModal()

模式化的显示这个对话框， 并且将会至于所有其他对话框的顶层（屏蔽其他对话框的交互）。 可选传入类型为Element 或者 MouseEvent 的参数， 用来定义对话框的显示位置。摘自MDN

来做一个demo玩玩吧

# 创建一个dialog
<dialog>
      <h1>我是一级标题</h1>
      <div>我是对话窗口，你已经打开了我！</div>
      <button id="close_dialog">关闭</button>
</dialog>
<button id="open_dialog">打开</button>

# js代码
<script>
      var dialog = document.getElementsByTagName("dialog")[0],
      openDialog = document.getElementById("open_dialog"),
      closeDialog = document.getElementById("close_dialog");
      openDialog.onclick = function(){
          dialog.showModal();// 或者show(),这是有区别的
      }
      closeDialog.onclick = function(){
          dialog.close();
      }
</script>

show()和showModal() 是有区别的，show只是显示dialog,而showMadal()是会屏蔽其他的弹出层

按ESC可以关闭dialog，dialog需要重新定义css样式，毕竟本身css是默认的样式
我们先来看看dialog的元素默认样式：

dialog:not([open]) { // 显示的时候
    display: none;
}
dialog {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    color: black;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 1em;
    background: white;
}
dialog::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.1);
}

# 重置背景色
dialog::backdrop{
     background-color: rgba(0, 0, 0, 0.6)
 }

image.png

Demo

MDN链接：

• Dialog
• HTMLDialogElement