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
kichaguzi::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:
<button id="open">Fungua</button>
<dialog>
<form method="dialog">
<p>Maandishi maandishi maandishi</p>
<button id="close">Funga</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: kijivu;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
