Source

मोडल

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

कोना काज करैत अछि

बूटस्ट्रैप केरऽ मोडल घटक स॑ शुरू करै स॑ पहल॑ निम्नलिखित बात क॑ जरूर पढ़ी क॑ हमरऽ मेनू विकल्प हाल ही म॑ बदली गेलऽ छै ।

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

एहि घटक क एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू .

डेमो आ उपयोगक दिशा निर्देशक लेल पढ़ैत रहू।

उदाहरण के लिये

नीचाँ एकटा स्थिर मोडल उदाहरण अछि (अर्थात ओकर 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-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="#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="exampleModalCenterTitle">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.relatedTargetआरू HTML data-*विशेषता (संभवतः jQuery के माध्यम स॑ ) मोडल केरऽ सामग्री म॑ बदलाव करै लेली ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै ।

नीचाँ लाइव डेमो अछि जकर बाद उदाहरण एचटीएमएल आ जावास्क्रिप्ट अछि । अधिक जानकारी क लेल, पर विस्तार स जानकारी क लेल मोडल इवेंट डॉक्स पढ़ू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)
})

एनीमेशन बदलें

चर मोडल फेड-इन एनीमेशन स पहिने $modal-fade-transformके रूपांतरण स्थिति निर्धारित करैत अछि , चर मोडल फेड-इन एनीमेशन के अंत में के रूपांतरण निर्धारित करैत अछि |.modal-dialog$modal-show-transform.modal-dialog

जँ अहाँ उदाहरणक लेल एकटा ज़ूम-इन एनीमेशन चाहैत छी, तँ अहाँ सेट कए सकैत छी $modal-fade-transform: scale(.8).

एनीमेशन हटाएँ

मोडल के लेल जे देखय लेल फीका पड़य के बजाय बस देखाइत अछि, .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-describedbyon केर संग द' सकैत छी .modal.

यूट्यूब वीडियो एम्बेड करब

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

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

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

माप वर्ग मोडल अधिकतम-चौड़ाई
छोट .modal-sm 300px
चुकनाइ कोनो नहि 500px
नमहर .modal-lg 800px
अतिरिक्त पैघ .modal-xl 1140px

संशोधक वर्ग के बिना हमर डिफ़ॉल्ट मोडल “मध्यम” आकार मोडल के गठन करैत अछि |

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

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

<!-- 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जावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:

$('#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घटना के गुण के रूप मँ उपलब्ध छै.
देखाओल गेल.bs.modal इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.
छिपाएँ.बीएस.मोडल ई घटना तुरंत फायर कएल जाइत अछि जखन hideइंस्टेंस मेथड कॉल कएल गेल अछि.
छिपल.बीएस.मोडल ई घटना तखन फायर कएल जाइत अछि जखन मोडल उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})