:modal?

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

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

브라우저 지원

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

소스

현재 두 가지 유형의 요소가 :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%);
 
}
}