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