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