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

मोडल के बा

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

एह पन्ना पर दिहल गइल बा

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

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

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

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

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

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

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

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

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

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()

हैंडलअपडेट कइल जाला

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

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