Backdrop sahte element
Sahte element backdrop bellenen element üçin Z öýi boýunça iň birinji elementden aşakda, ýöne beýleki elementlerden ýokarda ýerleşişi kesgitleýär. Bu sahte element köplenç sahypanyň fonuny garaýtmak üçin ulanylýar, onuň üstünde modal penjireler görkezilýär. Şu güne çenli backdrop sahte element diňe <dialog> elementi bilen döredilen modal penjireler bilen işleýär.
Sintaksis
selektor::backdrop {
background: sahypa fon üçin reňk;
}
Mysal
Geliň, düwmä basylanda modal penjire açylsyna we şol wagt sahypanyň fony garaýtmaklygy üpjün edeliň:
<button id="open">Aç</button>
<dialog>
<form method="dialog">
<p>Tekst tekst tekst</p>
<button id="close">Ýap</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: çal;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
