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

cssselektor::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ň:

html<button id="open">Aç</button>
<dialog>
  <form method="dialog">
    <p>Tekst tekst tekst</p>
    <button id="close">Ýap</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: çal;
}

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

Результат:

Şeýle-de serediň