এটা কি :মোডাল?

এই সহজ CSS ছদ্ম-নির্বাচক আপনাকে মডেল নির্বাচন করার একটি উপায় দেয়।

এই সহজ ছদ্ম-নির্বাচক আপনাকে "মডাল" উপাদানগুলি নির্বাচন করার একটি উপায় দেয় এবং জাভাস্ক্রিপ্টে ক্লাস পরিচালনা এড়াতে মডেল উপাদানগুলি সনাক্ত করার উপায় প্রদান করে৷

ব্রাউজার সমর্থন

  • ক্রোম: 105।
  • প্রান্ত: 105।
  • ফায়ারফক্স: 103।
  • সাফারি: 15.6।

উৎস

দুই ধরনের উপাদান বর্তমানে শ্রেণীবদ্ধ করা হয় :modal :

  • showModal পদ্ধতি ব্যবহার করে ডায়ালগ উপাদান।
  • পূর্ণ-স্ক্রীন মোডে থাকা উপাদান।

আপনি কিভাবে এটি ব্যবহার করতে পারেন? এই উদাহরণটি সমস্ত <dialog> উপাদানগুলির স্কেল সেট করে যা :modal

dialog:modal {
 
scale: 2;
}

এই ডেমোটি বিবেচনা করুন যেখানে আপনি "মোডাল" বা "নন-মোডাল" শৈলীতে একটি <dialog> দেখাতে পারেন।

আপনি যখন "মডাল" সংস্করণটি দেখান, তখন এটি শীর্ষ স্তর দ্বারা প্রদত্ত ::backdrop ব্যবহার করে।

dialog::backdrop {
 
background: hsl(0 0% 10% / 0.5);
}

কিন্তু, নন-মোডাল সংস্করণের জন্য যেটিতে ::backdrop নেই, একটি জাল তৈরি করা হয় ::before pseudo-element দিয়ে। এটি হালকা এবং এর পিছনের বিষয়বস্তুকে ঝাপসা করে না। আপনি একটি নন-মোডাল <dialog> সনাক্ত করতে :not এর সাথে একত্রিত করতে পারেন।

dialog[open]:not(:modal)::before {
 
content: "";
 
position: fixed;
 
height: 100vh;
 
width: 100vw;
 
top: 50%;
 
left: 50%;
 
background: hsl(0 0% 10% / 0.25);
 
transform: translate3d(-50%, -50%, -1px);
}

এটি পূর্ণ-স্ক্রীন মোডে থাকা উপাদানগুলির জন্যও কাজ করবে। স্প্যান দিয়ে তৈরি এই শিরোনাম উপাদান বিবেচনা করুন.

<header>
 
<h1>
   
<span style="--index: 0;">:</span>
   
<span style="--index: 1;">m</span>
   
<span style="--index: 2;">o</span>
   
<span style="--index: 3;">d</span>
   
<span style="--index: 4;">a</span>
   
<span style="--index: 5;">l</span>
 
</h1>
</header>

যখন উপাদানটি পূর্ণ-স্ক্রীন মোডে থাকে, তখন স্প্যানগুলি অ্যানিমেট হবে৷

h1 span {
 
animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
 
--speed: 0.75;
}
@keyframes jump {
 
50% {
   
transform: translateY(-50%);
 
}
}