मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

मोडल हें नांव

लायटबॉक्स, वापरपी अधिसुचोवण्यो, वा पुरायपणान सानुकूल सामुग्री खातीर तुमच्या साइटचेर संवाद जोडपाक Bootstrap चें JavaScript मोडल प्लगइन वापरात.

कशें काम करता

Bootstrap च्या मोडल घटकाक सुरवात करचे पयलीं, आमचे मेनू पर्याय हालीं बदलल्यात म्हणून सकयल दिल्लें वाचपाची खात्री करात.

  • मोडल एचटीएमएल, सीएसएस, आनी जावास्क्रिप्ट हांणी तयार केल्ले आसात. ते दस्तावेजांतल्या हेर सगळ्या गजालींचेर स्थापन केल्यात आनी तातूंतल्यान स्क्रोल काडून उडयतात <body>जेणे करून मोडल सामुग्री ताचे बदला स्क्रोल करता.
  • मोडल “पार्श्वभूंय” चेर क्लिक केल्यार मोडल आपोआप बंद जातलें.
  • बूटस्ट्रॅप एका वेळार फकत एक मोडल विंडो समर्थन करता. नेस्टेड मोडलांक तेंको दिवंक ना कारण आमी मानतात की ते वापरप्याचे वायट अणभव आसात.
  • Modals use position: fixed, जें केन्ना केन्नाय ताच्या रेंडरींग विशीं मात्शें विशिश्ट आसूं येता. शक्य आसल्यार, हेर घटकां कडल्यान संभाव्य हस्तक्षेप टाळपा खातीर तुमचो मोडल HTML वयल्या पांवड्यावेल्या सुवातेर दवरात. तुमकां .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करपाक to जोडात ..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आनी HTML data-bs-*गुणधर्म .

सकयल लायव्ह डेमो आसा आनी ताचे उपरांत उदाहरण HTML आनी JavaScript आसा. चड म्हायती खातीर, हाचेर तपशीलां खातीर मोडल इव्हेंट डॉक्स वाचात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-targetthe आनी 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" 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"लक्षांत दवरात की आमी पयलींच जावास्क्रिप्ट वरवीं जोडटात म्हणून तुमकां जोडपाची गरज ना .

युट्युब व्हिडियो एम्बेड करप

YouTube व्हिडियो मोडलांत एम्बेड करपाक आपोआप प्लेबॅक थांबवपाक Bootstrap त नाशिल्ली अतिरिक्त JavaScript जाय आनी हेर. चड म्हायती खातीर हें उपकाराचें स्टॅक ओव्हरफ्लो पोस्ट पळयात .

पर्यायी आकार आसात

मोडलांचे तीन पर्यायी आकार आसतात, जे एक चेर दवरपाक संशोधक वर्गां वरवीं उपलब्ध आसात .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()

handleUpdate करप

मोडाल उक्तो आसतना ताची उंचाय बदलल्यार (म्हळ्यार स्क्रोलबार दिसल्यार) मोडलाची सुवात हाताळणीन परतून समायोजीत करात.

myModal.handleUpdate()

विलो लावप

एका घटकाचें मोडल नश्ट करता. (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता)

myModal.dispose()

getInstance हें नांव

स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली मोडल दृष्टांत मेळोवपाक परवानगी दिता

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आनी मोडाला भायर क्लिक वा एस्केप की दामप कीबोर्ड पर्यायान वा data-bs-keyboardसेट केला तेन्ना फायर जाता false.
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})