backdrop pseudo-element

backdrop pseudo-element သည် element တစ်ခုအား Z-axis တွင် ပထမဆုံး element ၏ အောက်နှင့် အခြားသော element အားလုံး၏ အထက် တည်နေရာကို သတ်မှတ်ပေးသည်။ ဤ pseudo-element ကို များသောအားဖြင့် modal window များ ပြသသည့် နောက်ခံစာမျက်နှာကို မှောင်စေရန် အသုံးပြုပါသည်။ လက်ရှိအချိန်တွင် backdrop pseudo-element သည် <dialog> element ဖြင့် ဖန်တီးထားသော modal window များနှင့်သာ အလုပ်လုပ်ပါသည်။

Syntax

cssselector::backdrop {
  background: နောက်ခံအတွက် အရောင်;
}

ဥပမာ

ခလုတ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ modal window ပွင့်လာပြီး နောက်ခံစာမျက်နှာကို မှောင်သွားစေရန် ပြုလုပ်ကြည့်ရအောင်။

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: မီးခိုးရောင်;
}

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

Результат:

ဆက်လက်လေ့လာရန်