HTML之dialog对话框元素

HTML<dialog>元素表示一个对话框，它拥有自己的API和一些特殊的CSS。

open特性表示dialog对话框是否打开，没有被设置open特性的dialog元素表示对话框不应该显示给用户。

<dialog>
  I'm closed.
</dialog>

<dialog open>
  I'm open.
</dialog>

注意dialog元素上任何CSS都可以应用，没有限制。

dialog元素API

dialog元素拥有用于show()打开和close()关闭dialog对话框元素的方法。

//dialog.show();
//dialog.close();
<button onclick="window.dialog.show();">open dialog</button>
<dialog id="dialog">
  I'm a dialog.
  <button onclick="window.dialog.close();">close</button>
</dialog>

当然您还可以使用showModal方法打开dialog对话框元素：

dialog.showModal();

showModal方法的不同之处，会给dialog对话框元素默认添加一个透明背景显示。当然您还可以通过::backdrop伪元素来修改dialog对话框元素后面的背景。

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

对话框还可以以重叠方式显示：

<button onclick="window.dialog.showModal();">open dialog</button>

<dialog id="dialog">
  I'm a dialog.
  <button onclick="window.dialog2.showModal();">open 2nd dialog</button>
  <button onclick="window.dialog.close();">close</button>
</dialog>

<dialog id="dialog2">
  I'm a 2nd dialog.
  <button onclick="window.dialog2.close();">close</button>
</dialog>

还有一种基于HTML的方式将dialog对话框元素关闭。如果您在其中放置表单的method="dialog"，则提交表单将会关闭dialog对话框。

<button onclick="window.dialog.showModal();">open dialog</button>

<dialog id="dialog">
  <p>I'm a dialog.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

dialog元素css之::backdrop伪元素

您可以使用dialog对话框元素::backdrop伪元素控制显示替换默认的透明度黑色背景设置，让我们用红色条纹做为背景：

dialog::backdrop {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.2),
    rgba(255, 0, 0, 0.2) 1px,
    rgba(255, 0, 0, 0.3) 1px,
    rgba(255, 0, 0, 0.3) 20px
  );
}

您还可以用backdrop-filter来做诸如模糊背景之类的事情。

dialog::backdrop {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 20px
  );
  backdrop-filter: blur(3px);
}