是互動形式嗎?

這個實用的 CSS 擬造選取器可讓您選取模態元素。

這個實用的虛擬選取器可讓您選取「強制回應」元素,並避免在 JavaScript 中管理強制回應元素的類別,藉此避免在 JavaScript 中管理類別。

瀏覽器支援

  • Chrome:105。
  • Edge:105。
  • Firefox:103。
  • Safari:15.6。

資料來源

目前有兩種類型的元素歸類為 :modal

  • 使用 showModal 方法的對話方塊元素。
  • 全螢幕模式中的元素。

如何使用?這個範例會設定所有 <dialog> 元素的比例,這些元素為 :modal

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