图解原生dialog标签（非常详细）

在html5中，新增了很多语义化的标签。如footer、header之类的，今天的主角是dialog标签

顾名思义，就是用来定义对话框的。目前只有Chrome和Safari支持该标签，所以用的不多，不过确实挺好用的

别担心，有官方的polyfill。

使用方法

1. 基础的用法

<dialog open>我是一个对话框</dialog>

可以open属性控制dialog是否显示，效果如下：

看看浏览器渲染的默认样式：

是挺丑的，而且默认还不是全屏居中、有透明遮罩

2. 使用JS API

当然，也可以用JS来控制元素的显示跟隐藏。

常用的有三个方法：

名称	说明
show	显示dialog元素（跟open属性控制一样）
showModal	显示dialog元素，并且全屏居中，并带有黑色透明遮罩
close	隐藏dialog元素

简单的用法：

<dialog>
  <p>我是一个对话框</p>
  <button onclick="hideDialog()">隐藏对话框</button>
</dialog>

<button onclick="showDialog()">显示对话框</button>

<script>
  let dialog = document.querySelector("dialog");

  // 显示对话框
  function showDialog() {
    dialog.show();
  }

  // 隐藏对话框
  functi