Ο ψευδο-στοιχείο backdrop
Ο ψευδο-στοιχείο backdrop ορίζει τη θέση
του καθορισμένου στοιχείου κάτω από το πρώτο στοιχείο στον άξονα Z, αλλά πάνω
από τα υπόλοιπα στοιχεία. Συχνά αυτός ο ψευδο-στοιχείο
χρησιμοποιείται για το σκίαση του φόντου της σελίδας, πάνω
στο οποίο εμφανίζονται τα μοντάλ παράθυρα.
Σήμερα ο ψευδο-στοιχείο backdrop
λειτουργεί μόνο με μοντάλ παράθυρα, που δημιουργήθηκαν
με το στοιχείο <dialog>.
Σύνταξη
επιλογέας::backdrop {
background: χρώμα για φόντο σελίδας;
}
Παράδειγμα
Ας κάνουμε έτσι ώστε με το πάτημα ενός κουμπιού να ανοίγει ένα μοντάλ παράθυρο, και το φόντο της σελίδας ενώ να σκιάζεται:
<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: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
