backdrop 의사 요소
backdrop 의사 요소는 지정된 요소를 Z축 상에서 가장 첫 번째 요소 아래,
그러나 다른 모든 요소 위에 위치시킵니다. 이 의사 요소는 종종 모달 창이 표시될 때
페이지 배경을 어둡게 하는 데 사용됩니다.
현재 backdrop 의사 요소는
<dialog> 요소를 사용하여 생성된 모달 창에서만 작동합니다.
구문
선택자::backdrop {
background: 배경 색상;
}
예제
버튼을 클릭하면 모달 창이 열리고 배경이 어두워지도록 만들어 봅시다:
<button id="open">열기</button>
<dialog>
<form method="dialog">
<p>텍스트 텍스트 텍스트</p>
<button id="close">닫기</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
