backdrop կեղծ տարրը

backdrop կեղծ տարրը նշված տարրին տալիս է դասավորություն Z առանցքի վրա ամենաուղիղ առաջին տարրից ներքև, բայց վերև մնացած տարրերից: Այս կեղծ տարրը հաճախ օգտագործվում է էջի ֆոնը մգեցնելու համար, որի վրա ցուցադրվում են մոդալ պատուհաններ: Ներկա դրությամբ backdrop կեղծ տարրը աշխատում է միայն մոդալ պատուհանների հետ, որոնք ստեղծվել են <dialog> տարրի միջոցով:

Շարահյուսություն

cssընտրիչ::backdrop {
  background: ֆոնի գույն էջի համար;
}

Օրինակ

Եկեք անենք այնպես, որ կոճակը սեղմելիս բացվի մոդալ պատուհան, իսկ էջի ֆոնը դրանով իսկ մգեցվի:

html<button id="open">Բացել</button>
<dialog>
  <form method="dialog">
    <p>Տեքստ տեքստ տեքստ</p>
    <button id="close">Փակել</button>
  </form>
</dialog>

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

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

Результат:

Տես նաև