मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

मोडल

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

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

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

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
एहि घटक क एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू .

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

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

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

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

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

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

अहां एकटा स्क्रॉल करय योग्य मोडल सेहो बना सकय छी जे मोडल बॉडी कें स्क्रॉल करय कें अनुमति देयत .modal-dialog-scrollableछै .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

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

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-*विशेषता केरऽ उपयोग करऽ ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै ।

नीचाँ लाइव डेमो अछि जकर बाद उदाहरण एचटीएमएल आ जावास्क्रिप्ट अछि । अधिक जानकारी क लेल, पर विस्तार स जानकारी क लेल मोडल इवेंट डॉक्स पढ़ूrelatedTarget .

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

मोडल के बीच टॉगल

data-bs-targetआओर data-bs-toggleविशेषता क किछु चतुर प्लेसमेंट क संग कई मोडल क बीच टॉगल करू . उदाहरण कें लेल, अहां मोडल मे पहिने सं खुलल साइन कें भीतर सं पासवर्ड रीसेट मोडल कें टॉगल कयर सकय छी. कृपया ध्यान दिअ जे एकहि समय मे अनेक मोडल नहि खोलल जा सकैत अछि —ई विधि बस दू अलग-अलग मोडल क बीच टॉगल करैत अछि.

पहिल मोडल खोलू
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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

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

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

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

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

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

गतिशील ऊंचाई

यदि कोनों मोडल कें खुलल रहला पर ओकर ऊंचाई बदलय छै, त अहां कें कॉल myModal.handleUpdate()करय कें चाही ताकि मोडल कें स्थिति कें पुनः समायोजित करय कें लेल स्क्रॉलबार दिखाय कें स्थिति मे.

सुलभता

aria-labelledby="..."मोडल शीर्षक के संदर्भित करैत , मे अवश्य जोड़ू .modal. एकर अतिरिक्त, अहाँ अपन मोडल संवादक विवरण aria-describedbyon केर संग द' सकैत छी .modal. ध्यान रहे कि अहां के जोड़य के जरूरत नहिं अछि role="dialog"किएक त हम पहिने सं जावास्क्रिप्ट के माध्यम सं जोड़ैत छी.

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

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

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

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

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

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

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

फुलस्क्रीन मोडल

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

वर्ग उपलब्धता
.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
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

सस्स

चर

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

फांस

$breakpointsनक्शा आ एकटा लूप कें माध्यम सं उत्तरदायी फुलस्क्रीन मोडल उत्पन्न कैल जायत छै scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

प्रयोग

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

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

टॉगल करब

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

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

खारिज

मोडल कें भीतरdata कोनों बटन पर विशेषता कें साथ बर्खास्तगी प्राप्त कैल जा सकय छै जैना की निम्नलिखित मे प्रदर्शित कैल गेल छै:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

अथवा मोडल कें बाहर कोनों बटन पर उपयोग करयत data-bs-targetजैना की निम्नलिखित छै:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
जखन कि कोनों मोडल कें खारिज करय कें दूनू तरीका समर्थित छै, ध्यान राखूं कि कोनों मोडल कें बाहर सं खारिज करनाय WAI-ARIA मोडल संवाद डिजाइन पैटर्न सं मेल नहि खायत छै . ई काज अपन जोखिम पर करू।

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

जावास्क्रिप्ट क एकटा लाइन क संग एकटा मोडल बनाउ:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-bs-, मे संलग्न करू , जेना data-bs-backdrop="".

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

विधियाँ

अतुल्यकालिक विधि एवं संक्रमण

सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .

अधिक जानकारी के लेल हमर जावास्क्रिप्ट दस्तावेज देखू .

पासिंग के विकल्प

एकटा मोडल के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

टॉगल करब

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

myModal.toggle()

प्रदर्शन

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

myModal.show()

साथ ही, आप एक DOM तत्व क॑ एक तर्क के रूप म॑ पास करी सकै छियै जे मोडल घटना म॑ ( relatedTargetगुण के रूप म॑) प्राप्त करलऽ जाब॑ सकै छै ।

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

नुकाउ

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

myModal.hide()

handleUpdate करब

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

myModal.handleUpdate()

निपटान करब

कोनो तत्व के मोडल के नष्ट करैत अछि। (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि)

myModal.dispose()

getInstance

स्थिर विधि जे अहां कें कोनों डोम तत्व सं जुड़ल मोडल इंस्टेंस प्राप्त करय कें अनुमति देयत छै

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance के लिये

स्थिर विधि जे अहां कें कोनों DOM तत्व सं जुड़ल मोडल इंस्टेंस प्राप्त करय कें अनुमति देयत छै, या एकटा नव बनावा कें स्थिति मे इ आरंभ नहि कैल गेलय

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

घटनाक्रम

बूटस्ट्रैप केरऽ मोडल क्लास मोडल कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै । सब मोडल घटना मोडल पर स्वयं (अर्थात <div class="modal">) पर फायर कयल जाइत अछि |

घटना प्रकार वर्णन
show.bs.modal showइंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.
shown.bs.modal इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.
hide.bs.modal ई घटना तुरंत फायर कएल जाइत अछि जखन hideइंस्टेंस मेथड कॉल कएल गेल अछि.
hidden.bs.modal ई घटना तखन फायर कएल जाइत अछि जखन मोडल उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
hidePrevented.bs.modal ई घटना तखन फायर कएल जाइत अछि जखन मोडल देखाओल जाइत अछि, ओकर बैकग्राउंड होइत अछि staticआ मोडलसँ बाहर एकटा क्लिक वा एस्केप की प्रेस कीबोर्ड विकल्पक संग कएल जाइत अछि data-bs-keyboardवा false.
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})