借助这个实用的 CSS 伪选择器,您可以选择模态元素。
借助这个实用的伪类选择器,您可以选择“模态”元素,并通过提供检测模态元素的方法来避免在 JavaScript 中管理类。
目前,有两种类型的元素被归类为 :modal
:
- 使用
showModal
方法的对话框元素。 - 处于全屏模式的元素。
如何使用它?此示例设置了所有为 :modal
的 <dialog>
元素的缩放比例。
dialog:modal {
scale: 2;
}
请考虑以下演示,您可以在“模态”或“非模态”样式中显示 <dialog>
。
当您显示“模态”版本时,它会使用顶层提供的 ::backdrop
。
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
不过,对于没有 ::backdrop
的非模态版本,系统会使用 ::before
伪元素创建一个虚构的 ::backdrop
。它更轻盈,不会使背后的内容模糊不清。您可以将其与 :not
组合使用,以检测非模态 <dialog>
。
dialog[open]:not(:modal)::before {
content: "";
position: fixed;
height: 100vh;
width: 100vw;
top: 50%;
left: 50%;
background: hsl(0 0% 10% / 0.25);
transform: translate3d(-50%, -50%, -1px);
}
这也适用于处于全屏模式的元素。假设这个标题元素由 span 组成。
<header>
<h1>
<span style="--index: 0;">:</span>
<span style="--index: 1;">m</span>
<span style="--index: 2;">o</span>
<span style="--index: 3;">d</span>
<span style="--index: 4;">a</span>
<span style="--index: 5;">l</span>
</h1>
</header>
当元素处于全屏模式时,span 将会呈现动画效果。
h1 span {
animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
--speed: 0.75;
}
@keyframes jump {
50% {
transform: translateY(-50%);
}
}