Ta strona została przetłumaczona przez Cloud Translation API.

Czy to :modal?

Ten przydatny pseudoselektor arkusza CSS umożliwia wybieranie elementów, które są modalne.

Jhey Tompkins

Ten przydatny pseudoselektor umożliwia wybieranie elementów, które są „modalne”, oraz unikanie zarządzania klasami w JavaScriptzie dzięki wykrywaniu elementów modalnych.

Obsługa przeglądarek

Źródło

Obecnie do elementów :modal zaliczamy 2 rodzaje elementów:

Elementy dialogu, które używają metody showModal.
elementy, które są w trybie pełnoekranowym.

Jak możesz go używać? W tym przykładzie ustawiono skalę wszystkich elementów <dialog>, które są :modal.

dialog:modal {
 scale: 2;
}

W tym pokazie możesz wyświetlić element <dialog> w stylu „modalnym” lub „niemodalnym”.

Gdy wyświetlasz wersję „modalną”, używa ona ::backdrop podawane przez najwyższą warstwę.

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

W przypadku wersji niemodalnej, która nie ma elementu ::backdrop, tworzony jest fałszywy element za pomocą pseudoelementu ::before. Jest on jaśniejszy i nie powoduje rozmycia treści znajdujących się za nim. Możesz połączyć z :not, aby wykryć niemodalną <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);
}

Działa to również w przypadku elementów w trybie pełnoekranowym. Weź pod uwagę ten element nagłówka utworzony z elementów 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>

Gdy element jest w trybie pełnoekranowym, zakresy będą animowane.

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