পseudoelement backdrop
পseudoelement backdrop নির্দিষ্ট উপাদানটিকে
Z-অক্ষ বরাবর প্রথম উপাদানের নিচে, কিন্তু অন্যান্য
উপাদানের উপরে অবস্থান নির্দেশ করে। প্রায়শই এই pseudoelement
পৃষ্ঠার পটভূমি অন্ধকার করতে ব্যবহার করা হয়, যার
উপর মোডাল উইন্ডো প্রদর্শিত হয়।
বর্তমানে, pseudoelement backdrop
শুধুমাত্র সেইসব মোডাল উইন্ডোর সাথেই কাজ করে যেগুলো
<dialog> উপাদান দিয়ে তৈরি করা হয়েছে।
সিনট্যাক্স
সিলেক্টর::backdrop {
background: পটভূমির রঙ;
}
উদাহরণ
আসুন একটি বোতামে ক্লিক করলে একটি মোডাল উইন্ডো খুলে এবং একই সাথে পৃষ্ঠার পটভূমি অন্ধকার করা যাক:
<button id="open">Open</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">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());
:
