พีซูโดเอเลเมนต์ backdrop

พีซูโดเอเลเมนต์ backdrop กำหนดตำแหน่ง ให้องค์ประกอบที่ระบุอยู่ด้านหลังองค์ประกอบแรกสุดตามแกน Z แต่อยู่ด้านหน้า องค์ประกอบอื่นๆ ทั้งหมด มักใช้พีซูโดเอเลเมนต์นี้ เพื่อทำให้พื้นหลังของหน้าเว็บมืดลง เมื่อมีการแสดงกล่อง modal ปัจจุบัน พีซูโดเอเลเมนต์ backdrop ทำงานได้เฉพาะกับกล่อง modal ที่สร้างขึ้น โดยใช้องค์ประกอบ <dialog> เท่านั้น

ไวยากรณ์

cssselector::backdrop {
  background: สีสำหรับพื้นหลังหน้า;
}

ตัวอย่าง

มาทำให้เมื่อกดปุ่ม แล้วเปิดกล่อง modal ขึ้นมา พื้นหลังของหน้าเว็บ จะมืดลง:

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: สีเทา;
}

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

Результат:

ดูเพิ่มเติม