मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

मोडल

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

इस पृष्ठ पर

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

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

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

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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 ।

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const 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 कर्तुं शक्नोति । कृपया ज्ञातव्यं यत् एकस्मिन् समये बहुविधमोडाल् उद्घाटयितुं न शक्यते —एषा पद्धतिः केवलं पृथक् पृथक् मोडलद्वयस्य मध्ये टॉगल करोति ।

प्रथमं मोडलं उद्घाटयन्तु
html 
<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>

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चर-पद्धतेः भागत्वेन, मोडल्स् इदानीं वर्धित-वास्तविक-समय-अनुकूलन- उपरि .modalतथा च कृते स्थानीय-CSS चर-उपयोगं कुर्वन्ति । .modal-backdropCSS चरस्य मूल्यानि Sass मार्गेण सेट् भवन्ति, अतः Sass अनुकूलनं अद्यापि समर्थितम् अस्ति, अपि ।

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

सस्स चर

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

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

प्रयोगः

मोडल प्लगिन् भवतः गुप्तसामग्री आग्रहेण, आँकडा विशेषताभिः अथवा जावास्क्रिप्ट् मार्गेण टोग्ल् करोति । इदं पूर्वनिर्धारितं स्क्रॉलिंग् व्यवहारं अपि अधिलिखति तथा च .modal-backdropमोडालस्य बहिः क्लिक् करणसमये दर्शितानां मोडालानां निराकरणार्थं क्लिक् क्षेत्रं प्रदातुं a जनयति ।

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

टॉगल करें

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

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

Dismiss

Dismissal can be achieved with the data attribute on a button within the modal as demonstrated below:

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

or on a button outside the modal using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the ARIA Authoring Practices Guide dialog (modal) pattern. Do this at your own risk.

Via JavaScript

Create a modal with a single line of JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

Name Type Default Description
backdrop boolean, 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
focus boolean true Puts the focus on the modal when initialized.
keyboard boolean true Closes the modal when escape key is pressed.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Passing options

Activates your content as a modal. Accepts an optional options object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Method Description
dispose Destroys an element’s modal. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the modal instance associated with a DOM element.
getOrCreateInstance Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.
handleUpdate Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
hide Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Description
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})