Source

मोडल के बा

लाइटबॉक्स, यूजर नोटिफिकेशन, भा पूरा तरीका से कस्टम सामग्री खातिर अपना साइट पर डायलॉग जोड़े खातिर बूटस्ट्रैप के जावास्क्रिप्ट मोडल प्लगइन के इस्तेमाल करीं.

कइसे काम करेला

बूटस्ट्रैप के मोडल कंपोनेंट से शुरू करे से पहिले निम्नलिखित बातन के जरूर पढ़ीं काहे कि हाल में हमनी के मेनू विकल्प में बदलाव भइल बा.

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

डेमो आ प्रयोग के दिशानिर्देश खातिर पढ़त रहीं।

उदाहरण खातिर दिहल गइल बा

नीचे एगो स्थिर मोडल उदाहरण दिहल गइल बा (मतलब एकर positiondisplayओवरराइड कइल गइल बा)। एह में मोडल हेडर, मोडल बॉडी (के खातिर जरूरी बा 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.relatedTargetएचटीएमएल 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)
})

एनीमेशन के हटा दिहल जाव

मोडल सभ खातिर जे खाली देखे खातिर फीका होखे के बजाय लउके लें, .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। ई साइज कुछ खास ब्रेकपॉइंट सभ पर किक इन करे लें ताकि संकरी व्यूपोर्ट सभ पर क्षैतिज स्क्रॉलबार से बचावल जा सके।

<!-- 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>

प्रयोग के बारे में बतावल गइल बा

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