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: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
