बूटस्ट्रैप मोडल प्लगइन
मोडल प्लगइन
मोडल प्लगइन एक डायलॉग बॉक्स/पॉपअप विंडो है जो वर्तमान पृष्ठ के शीर्ष पर प्रदर्शित होती है:
युक्ति: प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (बूटस्ट्रैप की व्यक्तिगत "मोडल.जेएस" फ़ाइल का उपयोग करके), या सभी को एक साथ ("bootstrap.js" या "bootstrap.min.js" का उपयोग करके) शामिल किया जा सकता है।
एक मॉडल कैसे बनाएं
निम्न उदाहरण दिखाता है कि मूल मोडल कैसे बनाया जाए:
उदाहरण
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
उदाहरण समझाया गया
"ट्रिगर" भाग:
मोडल विंडो को ट्रिगर करने के लिए, आपको एक बटन या एक लिंक का उपयोग करना होगा।
फिर दो डेटा-* विशेषताएँ शामिल करें:
data-toggle="modal"मोडल विंडो खोलता हैdata-target="#myModal"मोडल की आईडी को इंगित करता है
"मोडल" भाग:
मोडल के पैरेंट <div>के पास एक आईडी होनी चाहिए जो मोडल ("myModal") को ट्रिगर करने के लिए उपयोग किए जाने वाले डेटा-टारगेट एट्रिब्यूट के मान के समान हो।
.modalवर्ग <div>एक मॉडल के रूप में सामग्री की पहचान करता है और उस पर ध्यान केंद्रित करता है ।
वर्ग एक संक्रमण प्रभाव जोड़ता है जो .fadeमोडल को अंदर और बाहर फीका करता है। यदि आप यह प्रभाव नहीं चाहते हैं तो इस वर्ग को हटा दें।
यह विशेषता role="dialog"स्क्रीन रीडर का उपयोग करने वाले लोगों की पहुंच में सुधार करती है।
वर्ग मोडल की .modal-dialogउचित चौड़ाई और मार्जिन सेट करता है।
"मोडल सामग्री" भाग:
के <div>साथ class="modal-content" मोडल को स्टाइल करता है (बॉर्डर, बैकग्राउंड-कलर, आदि)। इसके अंदर <div>, मोडल का हेडर, बॉडी और फुटर जोड़ें।
.modal-headerमोडल के हेडर के लिए शैली को परिभाषित करने के लिए वर्ग का उपयोग किया जाता है । हेडर के <button>अंदर एक data-dismiss="modal"विशेषता है जो मोडल को बंद कर देती है यदि आप उस पर क्लिक करते हैं। .closeक्लास क्लोज बटन को स्टाइल करता है, और क्लास .modal-titleहेडर को उचित लाइन-ऊंचाई के साथ स्टाइल करता है।
.modal-bodyमोडल के शरीर के लिए शैली को परिभाषित करने के लिए वर्ग का उपयोग किया जाता है । यहां कोई HTML मार्कअप जोड़ें; पैराग्राफ, चित्र, वीडियो, आदि।
वर्ग का .modal-footerउपयोग मोडल के पाद लेख की शैली को परिभाषित करने के लिए किया जाता है। ध्यान दें कि यह क्षेत्र डिफ़ॉल्ट रूप से सही संरेखित है।
मोडल आकार
.modal-sm
छोटे मोडल के लिए .modal-lgवर्ग या बड़े मोडल के लिए वर्ग जोड़कर मोडल का आकार बदलें ।
<div>वर्ग के साथ तत्व में आकार वर्ग जोड़ें .modal-dialog:
छोटा मोडल
<div class="modal-dialog modal-sm">
बड़ा मोडल
<div class="modal-dialog modal-lg">
डिफ़ॉल्ट रूप से, मोडल आकार में मध्यम होते हैं।
पूर्ण बूटस्ट्रैप मोडल संदर्भ
सभी मोडल विकल्पों, विधियों और घटनाओं के संपूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस मोडल संदर्भ पर जाएं ।