【Web前瞻】一个可以打开模态窗的 CSS 新属性

CSS :modal ，是一个方便的 CSS 伪选择器提供了一种选择"模态"元素的方法。

目前 Chrome 105 已经开始支持，浏览器兼容性一览:

目前有两种类型的元素被归类为:modal：

1. 使用 showModal 方法的对话框元素。
2. 处于全屏模式的元素。

:modal 代码片段示例：

结合顶层渲染伪类 ::backdrop 的全屏效果 modal 演示（如无效果请进入查看详情中运行）：