backdrop 의사 요소

backdrop 의사 요소는 지정된 요소를 Z축 상에서 가장 첫 번째 요소 아래, 그러나 다른 모든 요소 위에 위치시킵니다. 이 의사 요소는 종종 모달 창이 표시될 때 페이지 배경을 어둡게 하는 데 사용됩니다. 현재 backdrop 의사 요소는 <dialog> 요소를 사용하여 생성된 모달 창에서만 작동합니다.

구문

css선택자::backdrop {
  background: 배경 색상;
}

예제

버튼을 클릭하면 모달 창이 열리고 배경이 어두워지도록 만들어 봅시다:

html<button id="open">열기</button>
<dialog>
  <form method="dialog">
    <p>텍스트 텍스트 텍스트</p>
    <button id="close">닫기</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

함께 보기