in English

मोडल

प्रकाशपेटिकाः, उपयोक्तृसूचनाः, अथवा पूर्णतया अनुकूलितसामग्रीणां कृते स्वसाइट् मध्ये संवादं योजयितुं Bootstrap इत्यस्य JavaScript मोडल् प्लगिन् उपयुज्यताम् ।

इस पृष्ठ पर

कथं कार्यं करोति

Bootstrap इत्यस्य modal घटकेन सह आरम्भात् पूर्वं निम्नलिखितम् अवश्यं पठन्तु यतः अस्माकं मेनू विकल्पाः अद्यतने परिवर्तिताः सन्ति ।

मोडल्स् HTML, CSS, JavaScript इत्यनेन सह निर्मिताः सन्ति । ते दस्तावेजे अन्यत् सर्वं उपरि स्थिताः सन्ति तथा च स्क्रॉलं निष्कासयन्ति <body>येन मोडल सामग्री तस्य स्थाने स्क्रॉलं करोति।
मोडल् “backdrop” इत्यत्र क्लिक् कृत्वा स्वयमेव मोडल् बन्दं भविष्यति ।
बूटस्ट्रैप् एकस्मिन् समये केवलं एकं मोडल् विण्डो समर्थयति । नेस्टेड् मोडाल्स् समर्थिताः न सन्ति यतः वयं तान् दुर्बलाः उपयोक्तृअनुभवाः इति मन्यामहे।
Modals use position: fixed, यत् कदाचित् तस्य प्रतिपादनस्य विषये किञ्चित् विशेषं भवितुम् अर्हति । यदा यदा सम्भवं भवति तदा अन्येभ्यः तत्त्वेभ्यः सम्भाव्यहस्तक्षेपं परिहरितुं स्वस्य मोडल HTML शीर्षस्तरीयस्थाने स्थापयन्तु । .modalअन्यस्य नियततत्त्वस्य अन्तः एकं नेस्ट् कृत्वा भवन्तः सम्भवतः समस्यासु धावन्ति ।
पुनः, कारणतः position: fixed, चलयन्त्रेषु मोडालस्य उपयोगेन सह केचन चेतावनीः सन्ति । विस्तरेण ज्ञातुं अस्माकं ब्राउज़र समर्थन डॉक्स पश्यन्तु।
HTML5 इत्यनेन स्वस्य शब्दार्थं कथं परिभाषयति इति कारणतः Bootstrap modals इत्यत्र autofocusHTML विशेषतायाः कोऽपि प्रभावः नास्ति । समानं प्रभावं प्राप्तुं, किञ्चित् कस्टम् जावास्क्रिप्ट् उपयुज्यताम् :

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

डेमो तथा उपयोग मार्गदर्शिकाओं के लिए पढ़ते रहें।

उदाहरणानि

अधः स्थिरं मोडल उदाहरणम् (अर्थात् its positionand displayhave been overridden) अस्ति । अत्र मोडल हेडर, मोडल बॉडी (required for 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>

स्थिर पृष्ठभूमि

यदा backdrop static इति सेट् भवति तदा तस्य बहिः क्लिक् करणसमये modal न बन्दं भविष्यति । तस्य प्रयोगार्थं अधोलिखितं बटनं नुदन्तु ।

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

जालस्य उपयोगेन

अन्तः नेस्टिंग् कृत्वा एकस्य मोडलस्य अन्तः Bootstrap जालप्रणाल्याः उपयोगं .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>

बटनस्य एकः गुच्छः अस्ति यत् सर्वे किञ्चित् भिन्नसामग्रीभिः सह समानं मोडलं प्रेरयन्ति? कस्य बटनस्य क्लिक् कृतम् इति अवलम्ब्य मोडालस्य सामग्रीं परिवर्तयितुं HTML विशेषतानांevent.relatedTarget च उपयोगं कुर्वन्तु ।data-bs-*

अधः लाइव डेमो अस्ति तदनन्तरं उदाहरणं HTML तथा JavaScript अस्ति। अधिकविवरणार्थं, विषये विवरणार्थं modal events docs पठन्तु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 and data-bs-toggleविशेषतानां किञ्चित् चतुरं स्थापनेन सह बहुविधमोडलयोः मध्ये टॉगलं कुर्वन्तु । यथा, भवान् पूर्वमेव उद्घाटितस्य sign in modal इत्यस्य अन्तःतः password reset modal इत्येतत् 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

यदि भवान् उदाहरणार्थं zoom-in animation इच्छति तर्हि भवान् $modal-fade-transform: scale(.8).

एनिमेशन को हटा दें

दृश्यार्थं फीका भवितुं न अपितु केवलं दृश्यमानानां मोडालानां कृते, .fadeस्वस्य मोडल मार्कअपतः वर्गं निष्कासयन्तु ।

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

गतिशील ऊर्ध्वताः

यदि कस्यचित् मोडलस्य ऊर्ध्वता उद्घाटिते सति परिवर्तते तर्हि भवन्तः myModal.handleUpdate()स्क्रॉलबारः दृश्यते चेत् मोडलस्य स्थितिं पुनः समायोजयितुं आह्वानं कुर्वन्तु ।

सुलभता

अवश्यं योजयन्तु aria-labelledby="...", मोडल शीर्षकस्य सन्दर्भं दत्त्वा, .modal. aria-describedbyतदतिरिक्तं, भवान् on इत्यनेन सह स्वस्य मोडल संवादस्य वर्णनं दातुं शक्नोति .modal। ध्यानं कुर्वन्तु यत् भवद्भिः योजयितुं आवश्यकता नास्ति role="dialog"यतः वयं पूर्वमेव जावास्क्रिप्ट् मार्गेण योजयामः ।

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

यूट्यूब-वीडियो-इत्येतत् मोडल्-मध्ये एम्बेड्-करणार्थं स्वयमेव प्लेबैक्-स्थगितुं Bootstrap-मध्ये न अतिरिक्त-जावास्क्रिप्ट्-इत्यस्य आवश्यकता वर्तते । अधिकसूचनार्थं एतत् सहायकं Stack Overflow पोस्ट पश्यन्तु।

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

मोडल्स् मध्ये त्रयः वैकल्पिकाः आकाराः सन्ति, ये एकस्मिन् स्थापनार्थं परिवर्तकवर्गाणां माध्यमेन उपलभ्यन्ते .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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-backdrop=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
`backdrop`	बूलेन वा तारः`'static'`	`true`	एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, `static`एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
`keyboard`	बूलियन इति	`true`	escape कील दबाने पर मोडल बन्द करता है
`focus`	बूलियन इति	`true`	आरम्भे मोडल इत्यत्र ध्यानं स्थापयति ।

विधियाँ

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

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

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

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

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

toggle इति

एकं मोडलं मैन्युअल् रूपेण टॉगल करोति। मोडलस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् 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

getOrCreateइन्स्टेंस इति

स्थिरविधिः या भवन्तं 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...
})