이 편리한 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);
}
전체 화면 모드에 있는 요소에도 작동합니다. 스팬으로 구성된 이 제목 요소를 살펴보세요.
<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%);
}
}