Source

मोडल

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

किवें कम्म करदा है

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

  • मोडल एचटीएमएल, सीएसएस, ते जावास्क्रिप्ट कन्नै बने दे न। एह् दस्तावेज़ च बाकी हर इक चीज़ उप्पर तैह् त कीते गेदे न ते स्क्रॉल थमां स्क्रॉल हटांदे न <body>तां जे मोडल सामग्री इसदे बजाय स्क्रॉल होई सकै।
  • मोडल “बैकग्राउंड” पर क्लिक करने कन्नै मोडल अपने आप बंद होई जाग।
  • बूटस्ट्रैप इक बारी च सिर्फ इक मोडल विंडो गी समर्थन करदा ऐ। नेस्टेड मोडल समर्थत नेईं ऐ की जे अस उ’नेंगी खराब बरतूनी अनुभव मनने आं।
  • मोडल दा इस्तेमाल करदे न position: fixed, जेह् ड़ा कदें-कदें इसदे रेंडरिंग दे बारे च थोड़ा खास होई सकदा ऐ। जदूं बी होई सकै, अपने मोडल एचटीएमएल गी शीर्शक-स्तरीय स्थिति च रक्खो तां जे दुए तत्वें थमां संभावित हस्तक्षेप थमां बचेआ जाई सकै. .modalसंभावना ऐ जे तुस कुसै होर नियत तत्व दे अंदर इक नेस्ट करदे बेल्लै मुद्दें च दौड़गे .
  • इक बारी फी, , दे कारण position: fixedमोबाइल डिवाइस पर मोडल दा इस्तेमाल करने कन्नै किश चेतावनी ऐ। विस्तार लेई साढ़े ब्राउज़र समर्थन डॉक्स दिक्खो।
  • HTML5 अपने शब्दार्थ गी किस चाल्ली परिभाशत करदा ऐ इसदे कारण, HTML autofocusविशेषता दा बूटस्ट्रैप मोडल च कोई असर नेईं होंदा ऐ. उसी प्रभाव हासल करने आस्तै, कुसै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो:
$('#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.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)
})

एनीमेशन हटाओ

मोडल आस्तै जेह् ड़े बस दिक्खने आस्तै फीके होने दे बजाय दिक्खने गी मिलदे न , .fadeअपने मोडल मार्कअप थमां वर्ग गी हटाओ.

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

गतिशील ऊंचाई

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

सुलभता दा

मोडल शीर्षक दा संदर्भ दिंदे होई role="dialog"ते , गी , ते अपने आपै च जोड़ना सुनिश्चित करो । इसदे अलावा, तुस अपने मोडल संवाद दा वर्णन on कन्नै देई सकदे ओ .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.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>

प्रयोग करना

मोडल प्लगइन तुंदी छिपी दी सामग्री गी मंग पर, डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें टॉगल करदा ऐ। एह् डिफाल्ट स्क्रॉल व्यवहार गी ओवरराइड करने आस्तै बी जोड़दा ऐ ते मोडल दे बाहर क्लिक करदे बेल्लै दस्से गेदे मोडल गी खारिज करने आस्तै इक क्लिक क्षेत्र उपलब्ध करोआने आस्तै इक पैदा .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...
})