Ο ψευδο-στοιχείο backdrop

Ο ψευδο-στοιχείο backdrop ορίζει τη θέση του καθορισμένου στοιχείου κάτω από το πρώτο στοιχείο στον άξονα Z, αλλά πάνω από τα υπόλοιπα στοιχεία. Συχνά αυτός ο ψευδο-στοιχείο χρησιμοποιείται για το σκίαση του φόντου της σελίδας, πάνω στο οποίο εμφανίζονται τα μοντάλ παράθυρα. Σήμερα ο ψευδο-στοιχείο backdrop λειτουργεί μόνο με μοντάλ παράθυρα, που δημιουργήθηκαν με το στοιχείο <dialog>.

Σύνταξη

cssεπιλογέας::backdrop {
  background: χρώμα για φόντο σελίδας;
}

Παράδειγμα

Ας κάνουμε έτσι ώστε με το πάτημα ενός κουμπιού να ανοίγει ένα μοντάλ παράθυρο, και το φόντο της σελίδας ενώ να σκιάζεται:

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: grey;
}

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

Результат:

Δείτε επίσης