यह आसान सीएसएस स्यूडो-सिलेक्टर, आपको मॉडल वाले एलिमेंट चुनने का तरीका देता है.
इस आसान स्यूडो-सिलेक्टर की मदद से, "मोडल" एलिमेंट चुने जा सकते हैं. साथ ही, JavaScript में क्लास मैनेज करने से बचा जा सकता है. इसके लिए, मोडल एलिमेंट का पता लगाने का तरीका दिया गया है.
फ़िलहाल, दो तरह के एलिमेंट को :modal
के तौर पर रखा जाता है:
showModal
तरीके का इस्तेमाल करने वाले डायलॉग एलिमेंट.- फ़ुल-स्क्रीन मोड में मौजूद एलिमेंट.
इसका इस्तेमाल कैसे किया जा सकता है? इस उदाहरण में, :modal
वाले सभी <dialog>
एलिमेंट का स्केल सेट किया गया है.
dialog:modal {
scale: 2;
}
इस डेमो को देखें, जहां <dialog>
को "मोडल" या "नॉन-मोडल" स्टाइल में दिखाया जा सकता है.
"मोडल" वर्शन दिखाने पर, यह टॉप लेयर से मिले ::backdrop
का इस्तेमाल करता है.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
हालांकि, बिना मॉडल वाले वर्शन के लिए, ::backdrop
एलिमेंट नहीं होता. ऐसे में, ::before
स्यूडो-एलिमेंट की मदद से एक फ़र्ज़ी एलिमेंट बनाया जाता है. यह हल्की होती है और इसके पीछे मौजूद कॉन्टेंट को धुंधला नहीं करती. नॉन-मोडल <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%);
}
}