Pseudo-element backdrop

Pseudo-element backdrop xác định vị trí phần tử được chỉ định bên dưới phần tử đầu tiên nhất dọc theo trục Z, nhưng trên tất cả các phần tử khác. Pseudo-element này thường được áp dụng để làm tối nền trang, trên đó các cửa sổ modal được hiển thị. Hiện nay, pseudo-element backdrop chỉ hoạt động với các cửa sổ modal được tạo bằng phần tử <dialog>.

Cú pháp

cssselector::backdrop {
  background: màu cho nền trang;
}

Ví dụ

Hãy làm sao để khi nhấn nút một cửa sổ modal sẽ mở ra, đồng thời nền trang khi đó sẽ bị làm tối:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">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());

Результат:

Xem thêm