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

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

इस आसान स्यूडो-सिलेक्टर की मदद से, "मोडल" एलिमेंट चुने जा सकते हैं. साथ ही, JavaScript में क्लास मैनेज करने से बचा जा सकता है. इसके लिए, मोडल एलिमेंट का पता लगाने का तरीका दिया गया है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

सोर्स

फ़िलहाल, दो तरह के एलिमेंट को :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%);
  }
}