Source

मॉडल

लाइटबॉक्स, उपयोगकर्ता सूचनाओं, या पूरी तरह से कस्टम सामग्री के लिए अपनी साइट पर संवाद जोड़ने के लिए बूटस्ट्रैप के जावास्क्रिप्ट मोडल प्लगइन का उपयोग करें।

यह काम किस प्रकार करता है

बूटस्ट्रैप के मोडल घटक के साथ आरंभ करने से पहले, निम्नलिखित को पढ़ना सुनिश्चित करें क्योंकि हमारे मेनू विकल्प हाल ही में बदल गए हैं।

  • मॉडल एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ बनाए गए हैं। वे दस्तावेज़ में बाकी सब चीजों पर स्थित हैं और स्क्रॉल को हटा दें <body>ताकि इसके बजाय मोडल सामग्री स्क्रॉल हो।
  • मोडल "बैकड्रॉप" पर क्लिक करने से मोडल अपने आप बंद हो जाएगा।
  • बूटस्ट्रैप एक समय में केवल एक मोडल विंडो का समर्थन करता है। नेस्टेड मोडल समर्थित नहीं हैं क्योंकि हम मानते हैं कि वे खराब उपयोगकर्ता अनुभव हैं।
  • मॉडल उपयोग करते हैं position: fixed, जो कभी-कभी इसके प्रतिपादन के बारे में थोड़ा विशेष हो सकता है। जब भी संभव हो, अन्य तत्वों से संभावित हस्तक्षेप से बचने के लिए अपने मोडल HTML को शीर्ष-स्तरीय स्थिति में रखें। .modalकिसी अन्य निश्चित तत्व के भीतर घोंसला बनाते समय आप समस्याओं में भाग लेंगे ।
  • एक बार फिर, position: fixedमोबाइल उपकरणों पर मोडल का उपयोग करने के साथ कुछ चेतावनी हैं। विवरण के लिए हमारे ब्राउज़र समर्थन दस्तावेज़ देखें।
  • HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण बूटस्ट्रैप मोडल में autofocusHTML विशेषता का कोई प्रभाव नहीं पड़ता है। समान प्रभाव प्राप्त करने के लिए, कुछ कस्टम JavaScript का उपयोग करें:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

डेमो और उपयोग दिशानिर्देशों के लिए पढ़ते रहें।

उदाहरण

नीचे एक स्थिर मोडल उदाहरण है (जिसका अर्थ है इसका positionऔर displayओवरराइड किया गया है)। मोडल हेडर, मोडल बॉडी (के लिए आवश्यक padding), और मोडल फ़ुटर (वैकल्पिक) शामिल हैं। हम चाहते हैं कि जब भी संभव हो, आप ख़ारिज कार्रवाइयों के साथ मोडल हेडर शामिल करें, या कोई अन्य स्पष्ट बर्खास्तगी कार्रवाई प्रदान करें।

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

लाइव डेमो

नीचे दिए गए बटन पर क्लिक करके कार्यशील मोडल डेमो को टॉगल करें। यह नीचे की ओर खिसकेगा और पृष्ठ के शीर्ष से फीका हो जाएगा।

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

लंबी सामग्री स्क्रॉल करना

जब उपयोगकर्ता के व्यूपोर्ट या डिवाइस के लिए मोडल बहुत लंबे हो जाते हैं, तो वे पेज से स्वतंत्र रूप से स्क्रॉल करते हैं। हमारा क्या मतलब है यह देखने के लिए नीचे दिए गए डेमो का प्रयास करें।

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

लंबवत केंद्रित

मोडल को लंबवत केंद्र में .modal-dialog-centeredजोड़ें ।.modal-dialog

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

टूलटिप्स और पॉपओवर

टूलटिप्स और पॉपओवर को आवश्यकतानुसार मोडल में रखा जा सकता है। जब मोडल बंद हो जाते हैं, तो कोई भी टूलटिप और पॉपओवर भी अपने आप खारिज हो जाते हैं।

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

ग्रिड का उपयोग करना

. _ .container-fluid_ .modal-bodyफिर, सामान्य ग्रिड सिस्टम कक्षाओं का उपयोग करें जैसा कि आप कहीं और करेंगे।

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

भिन्न मोडल सामग्री

बटनों का एक गुच्छा है जो सभी एक ही मोडल को थोड़ा अलग सामग्री के साथ ट्रिगर करते हैं? किस बटन पर क्लिक किया गया था, इसके आधार पर मोडल की सामग्री को बदलने के लिए event.relatedTargetHTML विशेषताओं data-*( संभवतः jQuery के माध्यम से ) का उपयोग करें ।

नीचे एक लाइव डेमो दिया गया है जिसके बाद HTML और JavaScript का उदाहरण दिया गया है। अधिक जानकारी के लिए, विवरण के लिए मोडल इवेंट डॉक्स पढ़ेंrelatedTarget

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

एनिमेशन हटाएं

उन मोडल के लिए जो देखने में फीका होने के बजाय बस दिखाई देते हैं, .fadeअपने मोडल मार्कअप से क्लास को हटा दें।

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

गतिशील ऊंचाई

यदि किसी मोडल के खुले रहने के दौरान उसकी ऊंचाई बदल जाती है, तो आपको $('#myModal').modal('handleUpdate')स्क्रॉलबार दिखाई देने की स्थिति में मोडल की स्थिति को फिर से समायोजित करने के लिए कॉल करना चाहिए।

सरल उपयोग

जोड़ने के लिए सुनिश्चित करें role="dialog"और aria-labelledby="...", मोडल शीर्षक को संदर्भित करते हुए .modal, और स्वयं के role="document"लिए । .modal-dialogइसके अतिरिक्त, आप अपने मोडल डायलॉग का विवरण aria-describedbyऑन के साथ दे सकते हैं .modal

YouTube वीडियो एम्बेड करना

YouTube वीडियो को मोडल में एम्बेड करने के लिए अतिरिक्त जावास्क्रिप्ट की आवश्यकता होती है, न कि बूटस्ट्रैप में स्वचालित रूप से प्लेबैक को रोकने के लिए और बहुत कुछ। अधिक जानकारी के लिए यह सहायक स्टैक ओवरफ़्लो पोस्ट देखें।

वैकल्पिक आकार

मॉडल में दो वैकल्पिक आकार होते हैं, जो संशोधक वर्गों के माध्यम से उपलब्ध होते हैं जिन्हें .modal-dialog. संकरे व्यूपोर्ट पर क्षैतिज स्क्रॉलबार से बचने के लिए ये आकार कुछ निश्चित विराम बिंदुओं पर आते हैं।

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

प्रयोग

मोडल प्लगइन आपकी छिपी सामग्री को डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से मांग पर टॉगल करता है। .modal-openयह डिफ़ॉल्ट स्क्रॉलिंग व्यवहार को ओवरराइड करने के लिए भी जोड़ता है और मोडल के बाहर क्लिक करते समय दिखाए गए मॉडल को खारिज करने के लिए एक क्लिक क्षेत्र प्रदान करने के लिए <body>उत्पन्न करता है ।.modal-backdrop

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट लिखे बिना एक मोडल सक्रिय करें। टॉगल करने के लिए एक विशिष्ट मोडल को लक्षित करने या लक्षित करने data-toggle="modal"के लिए एक बटन की तरह एक नियंत्रक तत्व पर सेट करें ।data-target="#foo"href="#foo"

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

जावास्क्रिप्ट के माध्यम से

myModalजावास्क्रिप्ट की एक पंक्ति के साथ आईडी के साथ एक मोडल को कॉल करें :

$('#myModal').modal(options)

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-backdrop=""

नाम टाइप चूक विवरण
पृष्ठभूमि बूलियन या स्ट्रिंग'static' सच एक मोडल-बैकड्रॉप तत्व शामिल है। वैकल्पिक रूप से, उस पृष्ठभूमि के लिए निर्दिष्ट करें staticजो क्लिक पर मोडल को बंद नहीं करता है।
कीबोर्ड बूलियन सच एस्केप कुंजी दबाए जाने पर मोडल बंद कर देता है
केंद्र बूलियन सच इनिशियलाइज़ होने पर मोडल पर फ़ोकस करता है।
प्रदर्शन बूलियन सच प्रारंभ होने पर मोडल दिखाता है।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहलेइसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें।

.modal(options)

आपकी सामग्री को एक मोडल के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

एक मोडल को मैन्युअल रूप से टॉगल करता है। मोडल को वास्तव में दिखाया या छुपाया गया है (यानी shown.bs.modalया hidden.bs.modalघटना होने से पहले) कॉलर पर वापस आ जाता है।

$('#myModal').modal('toggle')

.modal('show')

मैन्युअल रूप से एक मोडल खोलता है। मोडल वास्तव में दिखाया गया है (यानी shown.bs.modalघटना होने से पहले) कॉलर को वापस लौटाता है।

$('#myModal').modal('show')

.modal('hide')

मैन्युअल रूप से एक मोडल छुपाता है। मोडल वास्तव में छुपाया गया है (यानी hidden.bs.modalघटना होने से पहले) कॉलर पर वापस आ जाता है।

$('#myModal').modal('hide')

.modal('handleUpdate')

मोडल की स्थिति को मैन्युअल रूप से समायोजित करें यदि एक मोडल की ऊंचाई खुली होने पर बदलती है (यानी यदि स्क्रॉलबार दिखाई देता है)।

$('#myModal').modal('handleUpdate')

.modal('dispose')

एक तत्व के मोडल को नष्ट कर देता है।

आयोजन

बूटस्ट्रैप का मोडल क्लास मोडल कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है। सभी मोडल इवेंट्स को मोडल पर ही (यानी पर <div class="modal">) निकाल दिया जाता है।

घटना प्रकार विवरण
शो.बीएस.मोडल showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTargetघटना की संपत्ति के रूप में उपलब्ध होता है।
दिखाया गया.बीएस.मोडल यह घटना तब सक्रिय हो जाती है जब मोडल को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTargetघटना की संपत्ति के रूप में उपलब्ध होता है।
छुपाएं.बीएस.मोडल hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.मोडल इस घटना को निकाल दिया जाता है जब मोडल उपयोगकर्ता से छुपाया जा रहा है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})