HTML পপওভার অ্যাট্রিবিউট

মডেলগুলি দুই দশক ধরে ওয়েবসাইটগুলির একটি গুরুত্বপূর্ণ অংশ। বিষয়বস্তু স্ট্যাকিং এবং ব্যবহার fetch ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই UX উন্নত করার জন্য কাজগুলি সম্পন্ন করা একটি দুর্দান্ত উপায়। দুর্ভাগ্যবশত বেশিরভাগ ডেভেলপার জানেন না যে এইচটিএমএল এবং জাভাস্ক্রিপ্ট স্পেক্স এর মাধ্যমে একটি নেটিভ মোডাল সিস্টেম প্রয়োগ করেছে popover বৈশিষ্ট্য — আসুন এটি পরীক্ষা করে দেখি!

এইচটিএমএল

একটি নেটিভ এইচটিএমএল মোডাল তৈরি করা ব্যবহার করে গঠিত popovertarget ট্রিগার হিসাবে বৈশিষ্ট্য এবং popover বৈশিষ্ট্য, একটি সঙ্গে জোড়া idবিষয়বস্তু উপাদান সনাক্ত করতে:

<!-- 
  "popovertarget" attribute will map to "id" of popover contents
-->
<button popovertarget="popover-contents">Open popover</button>
<div id="popover-contents" popover>This is the contents of the popover</div>

ক্লিক করার উপর buttonপপওভার খুলবে। পপওভারে অবশ্য প্রথাগত ব্যাকগ্রাউন্ড লেয়ার কালার থাকবে না তাই আমাদের নিজেদের কিছু সিএসএস ম্যাজিক দিয়ে তা বাস্তবায়ন করতে হবে।

সিএসএস

পপওভার কন্টেন্টের বিষয়বস্তু স্টাইল করা বেশ মানসম্মত কিন্তু আমরা ব্রাউজার স্টাইলশীট নির্বাচকের ছদ্ম-নির্বাচক ব্যবহার করতে পারি মডেলের “পটভূমি” স্টাইল করতে:

/* contents of the popover */
(popover) {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
(popover):-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop মডেলের “পটভূমি” প্রতিনিধিত্ব করে। ঐতিহ্যগতভাবে যে UI অস্বচ্ছতার সাথে একটি উপাদান যেমন স্ট্যাকিং সম্পর্ক দেখানোর জন্য।