क्या यह :मॉडल है?

यह आसान सीएसएस स्यूडो-सिलेक्टर, आपको मॉडल वाले एलिमेंट चुनने का तरीका देता है.

Jhey Tompkins

इस आसान स्यूडो-सिलेक्टर की मदद से, "मोडल" एलिमेंट चुने जा सकते हैं. साथ ही, 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%);
  }
}