बूस्ट्रैप 5 मॉडल

मोडल

Modal एक बारे/उभार विंडो है जो वर्तमान पृष्ठ के ऊपर दिखाया जाता है:

कैसे मोडल बनाया जाता है

नीचे का उदाहरण देखें कि कैसे बुनियादी मोडल बनाया जाता है:

उदाहरण

<!-- मोडल खोलने वाला बटन -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  मोडल खोलें
</button>
<!-- मोडल -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- मोडल शीर्षक -->
      <div class="modal-header">
        <h4 class="modal-title">मोडल शीर्षक</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- मोडल मुख्य -->
      <div class="modal-body">
        मोडल मुख्य ..
      </div>
      <!-- मोडल पाद -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">बंद करें</button>
      </div>
    </div>
  </div>
</div>

आप खुद अभिजापन करें

एनिमेशन जोड़ें

कृपया .fade क्लास को मोडल को खोलने और बंद करने पर फेड इन फेड आफ़ इफेक्ट जोड़ें:

उदाहरण

<!-- फेडिंग मोडल -->
<div class="modal fade"></div>
<!-- मोडल के बिना एनिमेशन -->
<div class="modal"></div>

आप खुद अभिजापन करें

मोडल आकार

स्माल मोडल को जोड़कर .modal-sm क्लास (मैक्स-विडथ 300px) को बड़े मोडल के लिए जोड़ें .modal-lg क्लास (मैक्स-विडथ 800px) या अति-बड़े मोडल के लिए जोड़ें .modal-xl से मोडल के आकार को बदलें (मैक्स-विडथ 1140 पिक्सल)。मूलभूत रूप से 500 पिक्सल मैक्स विडथ है।

कृपया इसे .modal-dialog क्लास और आकार क्लास को एक साथ जोड़ें <div> एलीमेंट:

स्माल मोडल

<div class="modal-dialog modal-sm">

आप खुद अभिजापन करें

लार्ज मोडल

<div class="modal-dialog modal-lg">

आप खुद अभिजापन करें

एक्स्ट्रा लार्ज मोडल

<div class="modal-dialog modal-xl">

आप खुद अभिजापन करें

डिफ़ॉल्ट में, मोडल का आकार "medium" (500px max-width) है।

पूर्ण स्क्रीन मोडल

यदि आप चाहते हैं कि मोडल पृष्ठ के पूरे चौड़ाई और ऊंचाई को बढ़ाए, तो .modal-fullscreen क्लास:

उदाहरण

<div class="modal-dialog modal-fullscreen">

आप खुद अभिजापन करें

रिस्पोंसिव पूर्ण स्क्रीन मोडल

आप अधिक रिस्पोंसिव पूर्ण स्क्रीन मोडल का उपयोग कर सकते हैं .modal-fullscreen-*-* क्लास को नियंत्रित करती है कि मोडल कब पूर्ण स्क्रीन में दिखाया जाए:

क्लास वर्णन उदाहरण
.modal-fullscreen-sm-down 576px से कम पूर्ण स्क्रीन आप खुद अभिजापन करें
.modal-fullscreen-md-down 768px से कम पूर्ण स्क्रीन आप खुद अभिजापन करें
.modal-fullscreen-lg-down 992px से कम पूर्ण स्क्रीन आप खुद अभिजापन करें
.modal-fullscreen-xl-down 1200px से कम पूर्ण स्क्रीन आप खुद अभिजापन करें
.modal-fullscreen-xxl-down 1400px से कम पूर्ण स्क्रीन आप खुद अभिजापन करें

केंद्रीत मोडल

इसके द्वारा उपयोग करके .modal-dialog-centric क्लास, पृष्ठ के अंदर विकर्ण और आड़े दिशा में मोडल को केंद्रीत करती है:

उदाहरण

<div class="modal-dialog modal-dialog-centered">

आप खुद अभिजापन करें

स्क्रॉल मोडल

जब मोडल में बहुत सारा सामग्री होता है, तो इससे पृष्ठ में एक स्क्रॉलबार जोड़ा जाता है।नीचे दिए गए उदाहरण को देखकर समझें:

उदाहरण

<div class="modal-dialog">

आप खुद अभिजापन करें

लेकिन, इसके द्वारा .modal-dialog-scrollable जोड़ें .modal-dialog केवल मोडल के अंदर गलती कर सकते हैं, नहीं कि पृष्ठ के आगे:

उदाहरण

<div class="modal-dialog modal-dialog-scrollable">

आप खुद अभिजापन करें