W3.CSS मोडल
एक मोडल एक डायलॉग बॉक्स/पॉपअप विंडो है जो वर्तमान पृष्ठ के शीर्ष पर प्रदर्शित होती है:
W3.CSS मोडल क्लासेस
W3.CSS मोडल विंडो के लिए निम्नलिखित कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-मोडल | मोडल कंटेनर |
| w3-मोडल-सामग्री | मोडल सामग्री |
एक मॉडल बनाएं
W3- मोडल वर्ग एक मोडल के लिए एक कंटेनर को परिभाषित करता है।
w3- मोडल-कंटेंट क्लास मोडल कंटेंट को परिभाषित करता है।
मोडल सामग्री कोई भी HTML तत्व (divs, Headings, पैराग्राफ, इमेज, आदि) हो सकती है।
उदाहरण
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
एक मॉडल खोलें
मोडल खोलने के लिए किसी भी HTML तत्व का उपयोग करें। हालाँकि, यह अक्सर एक बटन या लिंक होता है।
ऑनक्लिक विशेषता जोड़ें और दस्तावेज़.getElementById() विधि का उपयोग करके मोडल (हमारे उदाहरण में id01 ) की आईडी को इंगित करें।
एक मॉडल बंद करें
एक मोडल को बंद करने के लिए, एक ऑनक्लिक विशेषता के साथ एक तत्व में w3- बटन वर्ग जोड़ें जो मोडल ( id01 ) की आईडी को इंगित करता है। आप इसे मोडल के बाहर क्लिक करके भी बंद कर सकते हैं (नीचे उदाहरण देखें)।
युक्ति: × "x" अक्षर के बजाय करीबी आइकनों के लिए पसंदीदा HTML इकाई है।
मोडल हैडर और फूटर
मोडल सामग्री के अंदर विभिन्न अनुभाग बनाने के लिए w3-कंटेनर कक्षाओं का उपयोग करें :
उदाहरण
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
एक कार्ड के रूप में मोडल
मोडल को कार्ड के रूप में प्रदर्शित करने के लिए, w3-card-* कक्षाओं में से एक को w3-modal-content कंटेनर में जोड़ें:
उदाहरण
<div class="w3-modal-content w3-card-4">
एनिमेटेड मॉडल
किसी विशिष्ट दिशा से मोडल में स्लाइड करने के लिए w3-चेतन-ज़ूम|टॉप|बॉटम|दाएं|बाएं वर्गों में से किसी का उपयोग करें:
उदाहरण
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
w3-मोडल तत्व पर w3- चेतन-अस्पष्टता वर्ग सेट करके आप मोडल के पृष्ठभूमि रंग में भी फीका कर सकते हैं :
उदाहरण
<div class="w3-modal w3-animate-opacity">
मोडल छवि
इसे एक मॉडल के रूप में पूर्ण आकार में प्रदर्शित करने के लिए छवि पर क्लिक करें:
उदाहरण
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
मॉडल छवि गैलरी
किसी चित्र को पूर्ण आकार में प्रदर्शित करने के लिए उस पर क्लिक करें:
उदाहरण
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
मोडल लॉगिन फॉर्म
यह उदाहरण लॉगिन के लिए एक मोडल बनाता है:
उदाहरण
टैब्ड सामग्री के साथ मोडल
यह उदाहरण टैब्ड सामग्री के साथ एक मोडल बनाता है:
उदाहरण
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.