पसूडोएलिमेंट backdrop

पसूडोएलिमेंट backdrop निर्दिष्ट एलिमेंट को Z-अक्ष पर सबसे पहले एलिमेंट के नीचे, लेकिन बाकी एलिमेंट्स के ऊपर स्थिति प्रदान करता है। अक्सर इस पसूडोएलिमेंट का उपयोग पेज की बैकग्राउंड को डार्क करने के लिए किया जाता है, जिसपर मोडल विंडोज़ दिखाई जाती हैं। आजकल पसूडोएलिमेंट backdrop केवल मोडल विंडोज़ के साथ काम करता है, जो <dialog> एलिमेंट द्वारा बनाई गई हों।

सिंटैक्स

cssसिलेक्टर::backdrop {
  background: बैकग्राउंड के लिए रंग;
}

उदाहरण

आइए ऐसा करें कि बटन दबाने पर एक मोडल विंडो खुले, और पेज का बैकग्राउंड इस दौरान डार्क हो जाए:

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());

Результат:

यह भी देखें