CSS Image Modal

एक modal जो किसी thumbnail को एक full-screen lightbox में pop करता है आमतौर पर एक JavaScript feature माना जाता है, लेकिन अकेले CSS — :target pseudo-class या एक hidden checkbox इस्तेमाल करके — सिर्फ link clicks से इसे खोल और बंद कर सकता है।

In this page:

:target Technique
Modal Overlay बनाना
Modal को Close करना
Checkbox Hack Alternative
:target बनाम Checkbox Hack

Syntax

css

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: integer;
}
.modal img {
  max-width: 100%;
}

:target Technique

किसी thumbnail के <a href="#photo1"> को id="photo1" वाले element से link करना CSS को :target pseudo-class इस्तेमाल करके उस element को अलग तरह से style करने देता है जब वह page का current URL fragment हो — यह सिर्फ एक click से purely एक hidden full-size overlay दिखाने के लिए काफ़ी है, किसी JavaScript की ज़रूरत नहीं।

Note:

Accepted values:
:target — उस element को match करता है जिसकी id URL hash में है
display: none — default hidden state
display: block | flex — targeted होने पर दिखाया जाता है
position: fixed — viewport को cover करता है

उदाहरण: The :target Technique

css

<style>
#photo1 {
  display: none;
  background: #333;
  color: white;
  padding: 20px;
}
#photo1:target {
  display: block;
}
</style>
<a href="#photo1">Open photo</a>
<div id="photo1">Full-size image</div>

Modal Overlay बनाना

modal खुद एक fixed-position, full-viewport element है (position: fixed; inset: 0) जो display: none या opacity: 0 के साथ hidden शुरू होता है, और सिर्फ तभी visible होता है जब उसका :target rule match करे, flexbox से enlarged image को center करते हुए।

Note:

Accepted values:
position: fixed — viewport को cover करता है
inset: 0 — सभी edges तक फैलता है
background: rgba(0,0,0,0.8) — dim backdrop
z-index: <integer> — page के ऊपर stack होता है

उदाहरण: Building the Modal Overlay

css

<style>
.modal {
  display: none;
  position: fixed;
  inset: 0;
}
.modal:target {
  display: flex;
}
</style>
<div id="photo1" class="modal">
  <img src="https://placehold.co/400x300" alt="Enlarged photo">
</div>

Modal को Close करना

एक close control बस एक और link है, या तो page के plain # (या बिल्कुल कोई fragment नहीं) पर वापस या किसी dead anchor पर — इसे click करना URL fragment को modal की id से दूर बदल देता है, इसलिए :target rule अब match नहीं करता और modal गायब हो जाता है।

Note:

Accepted values:
<a href="#"> — hash clear करता है ताकि :target match करना बंद कर दे
position: absolute — close button को place करता है
cursor: pointer — दिखाता है कि यह clickable है
z-index — इसे image के ऊपर रखता है

उदाहरण: Closing the Modal

css

<style>
.modal {
  display: none;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 20px;
}
.modal:target {
  display: block;
}
</style>
<div id="photo1" class="modal">
  <a href="#" style="color: white;">Close</a>
</div>

Checkbox Hack Alternative

एक alternative technique एक असली <input type="checkbox"> को screen से बाहर hide करती है और इसे एक <label> के साथ जोड़ती है जो इसे toggle करता है; CSS फिर URL के बजाय checkbox की state के आधार पर modal दिखाने या छुपाने के लिए एक sibling selector पर :checked pseudo-class इस्तेमाल करता है।

Note:

Accepted values:
input:checked ~ .modal — sibling selector modal दिखाता है
display: none — checkbox को hide करता है
<label for="id"> — इसे toggle करता है
~ — general sibling combinator, सिर्फ checkbox के बाद के siblings

उदाहरण: The Checkbox Hack Alternative

css

<style>
.modal {
  display: none;
  background: #333;
  color: white;
  padding: 20px;
}
#toggle:checked ~ .modal {
  display: block;
}
</style>
<input type="checkbox" id="toggle" hidden>
<label for="toggle">Open</label>
<div class="modal">Shown via :checked, no URL change</div>

:target बनाम Checkbox Hack

:target approach असली URL बदलता है (किसी specific opened image को direct-linking करने के लिए उपयोगी, लेकिन इसका मतलब है back button भी इसे बंद कर देता है), जबकि checkbox hack URL को untouched छोड़ता है लेकिन careful sibling-selector structuring चाहता है क्योंकि :checked सिर्फ उन elements को असर कर सकता है जो DOM में checkbox के बाद आते हैं।

उदाहरण: :target vs Checkbox Hack

css

<style>
#a:target { background: yellow; }
</style>
<a href="#a">Target link changes the URL, back button closes it</a>
<div id="a">Target section</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Hover Overlays Next Lesson → CSS Image Centering

CSS Image Modal

:target Technique

Modal Overlay बनाना

Modal को Close करना

Checkbox Hack Alternative

:target बनाम Checkbox Hack

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code