Kipengele cha Uongo cha Backdrop

Kipengele cha uongo backdrop huweka mpangilio kwa kipengele maalum chini ya kipengele cha kwanza kabisa kwenye mhimili wa Z, lakini juu ya vipengele vilivyobaki. Mara nyingi kipengele hiki cha uongo hutumika kwa kuzuia mwanga wa ukurasa wa wavuti, ambapo viroba vya modi huonyeshwa. Kufikia leo, kipengele cha uongo backdrop kinafanya kazi tu na viroba vya modi, ambavyo vimeundwa kwa kutumia kipengele <dialog>.

Kisanii

csskichaguzi::backdrop {
  background: rangi ya msingi wa ukurasa;
}

Mfano

Wacha tufanye ili kwa kubofya kitufe kirobasha kidogo kifunguke, na msingi wa ukurasa wakati huu uzuiwe mwanga:

html<button id="open">Fungua</button>
<dialog>
  <form method="dialog">
    <p>Maandishi maandishi maandishi</p>
    <button id="close">Funga</button>
  </form>
</dialog>

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

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

Результат:

Angalia pia