HTML之dialog对话框元素

2019-10-1792次阅读html5

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);
}


 

上一篇: CSS之::backdrop伪元素  下一篇: Firefox、Chrome浏览器滚动条样式设置  

HTML之dialog对话框元素相关文章