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

1,556

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

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

image.png

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

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

:modal 代码片段示例:

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