बूटस्ट्रैप 4 मोडल
बूटस्ट्रैप 4 मोडल
मॉडल घटक एक संवाद बॉक्स/पॉपअप विंडो है जो वर्तमान पृष्ठ के शीर्ष पर प्रदर्शित होता है:
एक मॉडल कैसे बनाएं
निम्न उदाहरण दिखाता है कि मूल मोडल कैसे बनाया जाए:
उदाहरण
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
एनिमेशन जोड़ें
.fadeमोडल को खोलते और बंद करते समय लुप्त होती प्रभाव जोड़ने के लिए कक्षा का उपयोग करें :
उदाहरण
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
मोडल आकार
.modal-sm
छोटे मोडल के .modal-lgलिए वर्ग, बड़े मोडल के लिए वर्ग, या .modal-xlअतिरिक्त बड़े मोडल के लिए वर्ग जोड़कर मोडल का आकार बदलें ।
<div>वर्ग के साथ तत्व में आकार वर्ग जोड़ें .modal-dialog:
छोटा मोडल
<div class="modal-dialog modal-sm">
बड़ा मोडल
<div class="modal-dialog modal-lg">
एक्स्ट्रा लार्ज मोडल
<div class="modal-dialog modal-xl">
डिफ़ॉल्ट रूप से, मोडल आकार में "मध्यम" होते हैं।
केंद्रित मोडल
.modal-dialog-centered
वर्ग के साथ, पृष्ठ के भीतर मोडल को लंबवत और क्षैतिज रूप से केन्द्रित करें :
उदाहरण
<div class="modal-dialog modal-dialog-centered">
स्क्रॉलिंग मोडल
जब आपके पास मोडल के अंदर बहुत सारी सामग्री होती है, तो पेज पर एक स्क्रॉलबार जोड़ा जाता है। इसे समझने के लिए नीचे दिए गए उदाहरण देखें:
उदाहरण
<div class="modal-dialog">
हालांकि, इसमें जोड़कर केवल पृष्ठ के बजाय मोडल के अंदर स्क्रॉल करना संभव .modal-dialog-scrollableहै .modal-dialog:
उदाहरण
<div class="modal-dialog modal-dialog-scrollable">
पूर्ण बूटस्ट्रैप मोडल संदर्भ
सभी मोडल विकल्पों, विधियों और घटनाओं के संपूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस मोडल संदर्भ पर जाएं ।