Псевдоэлементи 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: хокистарӣ;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
