इस आसान सीएसएस स्यूडो-सिलेक्टर की मदद से, ऐसे एलिमेंट चुने जा सकते हैं जो मोडल हैं.
इस आसान सूडो-सिलेक्टर की मदद से, "मोडल" एलिमेंट को चुना जा सकता है. साथ ही, मोडल एलिमेंट का पता लगाकर JavaScript में क्लास को मैनेज करने से बचा जा सकता है.
फ़िलहाल, दो तरह के एलिमेंट को :modal की कैटगरी में रखा गया है:
showModalतरीके का इस्तेमाल करने वाले डायलॉग एलिमेंट.- ऐसे एलिमेंट जो फ़ुल-स्क्रीन मोड में हैं.
इसका इस्तेमाल कैसे किया जा सकता है? यह उदाहरण उन सभी <dialog> एलिमेंट का स्केल सेट करता है जो :modal हैं.
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%);
}
}
यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है