พีซูโดเอเลเมนต์ backdrop
พีซูโดเอเลเมนต์ backdrop กำหนดตำแหน่ง
ให้องค์ประกอบที่ระบุอยู่ด้านหลังองค์ประกอบแรกสุดตามแกน Z แต่อยู่ด้านหน้า
องค์ประกอบอื่นๆ ทั้งหมด มักใช้พีซูโดเอเลเมนต์นี้
เพื่อทำให้พื้นหลังของหน้าเว็บมืดลง
เมื่อมีการแสดงกล่อง modal
ปัจจุบัน พีซูโดเอเลเมนต์ backdrop
ทำงานได้เฉพาะกับกล่อง modal ที่สร้างขึ้น
โดยใช้องค์ประกอบ <dialog> เท่านั้น
ไวยากรณ์
selector::backdrop {
background: สีสำหรับพื้นหลังหน้า;
}
ตัวอย่าง
มาทำให้เมื่อกดปุ่ม แล้วเปิดกล่อง modal ขึ้นมา พื้นหลังของหน้าเว็บ จะมืดลง:
<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: สีเทา;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
