:modal?

이 편리한 CSS 의사 선택기를 사용하면 모달인 요소를 선택할 수 있습니다.

Jhey Tompkins

이 편리한 가상 선택자를 사용하면 '모달'인 요소를 선택하고 모달 요소를 감지하는 방법을 제공하여 JavaScript에서 클래스를 관리하지 않을 수 있습니다.

현재 두 가지 유형의 요소가 :modal로 분류됩니다.

• showModal 메서드를 사용하는 대화상자 요소
• 전체 화면 모드인 요소

어떻게 사용할 수 있나요? 이 예에서는 :modal인 모든 <dialog> 요소의 배율을 설정합니다.

dialog:modal {
 scale: 2;
}

<dialog>를 '모달' 또는 '비모달' 스타일로 표시할 수 있는 이 데모를 살펴보세요.

'모달' 버전을 표시하면 최상위 레이어에서 제공하는 ::backdrop를 사용합니다.

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

그러나 ::backdrop가 없는 비모달 버전의 경우 ::before 의사 요소를 사용하여 가짜 버전이 생성됩니다. 밝고 뒤에 있는 콘텐츠가 흐리게 표시되지 않습니다. :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);
}

전체 화면 모드에 있는 요소에도 작동합니다. 스팬으로 구성된 다음의 제목 요소를 생각해 보세요.

<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>

요소가 전체 화면 모드인 경우 스팬이 애니메이션됩니다.

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