편리한 CSS 의사 선택기로 모달 요소를 선택할 수 있습니다.
Jhey Tompkins
이 편리한 pseudo-selector를 사용하면 '모달'인 요소를 선택하고 모달 요소를 감지하는 방법을 제공하여 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%);
}
}