Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
in English

Modal

Shandisa Bootstrap's JavaScript modal plugin kuti uwedzere dialog kune yako saiti yemabhokisi emwenje, zviziviso zvevashandisi, kana zvizere zvemukati zvemukati.

Pa peji ino

Zvinoshanda sei

Usati watanga neBootstrap's modal component, iva nechokwadi chekuverenga zvinotevera sezvo sarudzo dzedu dzemenu dzakangochinja.

  • Modals dzakavakwa neHTML, CSS, uye JavaScript. Ivo vakamisikidzwa pamusoro pezvimwe zvese zviri mugwaro uye bvisa mupumburu kubva kune <body>kuti modal zvemukati zvipumburuke panzvimbo.
  • Kudzvanya pane modal "kumashure" kunozovhara modal.
  • Bootstrap inongotsigira imwe modal hwindo panguva. Nested modals hadzitsigirwe sezvo isu tichitenda kuti hadzina ruzivo rwevashandisi.
  • Modals inoshandisa position: fixed, iyo dzimwe nguva inogona kuve yakati wandei nezve kupa kwayo. Pese pazvinogoneka, isa yako modal HTML munzvimbo yepamusoro-yepamusoro kudzivirira kukanganisa kunogona kubva kune zvimwe zvinhu. Iwe ungangosangana nematambudziko kana uchinge waisa .modalmukati mechimwe chinhu chakagadziriswa.
  • Zvekare, nekuda kwe position: fixed, kune mamwe macaveats nekushandisa modal pane nharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.
  • Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo autofocusHTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Ramba uchiverengera demos uye nhungamiro yekushandisa.

Mienzaniso

Pazasi pane static modal muenzaniso (zvichireva kuti positionuye displayzvakapfuura). Inosanganisirwa iyo modal musoro, modal muviri (inodiwa padding), uye modal footer (sarudzo). Tinokumbira kuti ubatanidze misoro yemodal ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chimwe chiito chakajeka chekudzinga.

Modal title

Modal body text inoenda pano.

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

Live demo

Shandura demodhi yekushanda nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

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

Static backdrop

Kana kuseri kwakaiswa kune static, modal haivhare kana uchidzvanya kunze kwayo. Baya bhatani riri pazasi kuti uzviedze.

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

Kupuruzira zvemukati marefu

Kana modal dzarebesa pakuona kwemushandisi kana mudziyo, ivo vanofamba vakazvimiririra kubva papeji pachayo. Edza demo pazasi kuti uone zvatiri kureva.

Iwe unogona zvakare kugadzira modal inotenderera inobvumira kupuruzira modal muviri nekuwedzera .modal-dialog-scrollablekune .modal-dialog.

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

Vertically pakati

Wedzera .modal-dialog-centeredkune .modal-dialogvertically pakati modal.

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

Tooltips uye popovers

Zvishandiso uye popovers zvinogona kuiswa mukati memodals sezvinodiwa. Kana modal dzakavharwa, chero maturusi ezvishandiso uye mapopovers mukati anoraswa otomatiki.

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

Kushandisa grid

Shandisa iyo Bootstrap grid system mukati me modal nekuisa .container-fluidmukati meiyo .modal-body. Zvadaro, shandisa akajairwa grid system makirasi sezvaungaita kumwe kumwe.

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

Kusiyana kwe modal content

Iva neboka remabhatani ayo ese anokonzeresa imwe modal ine zvishoma zvakasiyana zviri mukati? Shandisa event.relatedTargetuye HTML data-bs-*hunhu kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa.

Pazasi pane demo mhenyu inoteverwa nemuenzaniso HTML neJavaScript. Kuti uwane rumwe ruzivo, verenga modal zviitiko zvinyorwa zveruzivo nezve 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
})

Toggle pakati modals

Shandura pakati pemamodal akawanda ane kumwe kungwara kwekuiswa kweiyo data-bs-targetuye data-bs-togglehunhu. Semuenzaniso, unogona kushandura password reset modal kubva mukati meiyo yatovhurwa sign in modal. Ndapota cherechedza kuti modals dzakawanda hadzigoni kuvhurwa panguva imwe chete-iyi nzira inongochinja pakati pemhando mbiri dzakasiyana.

Vhura yekutanga modal
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>

Chinja animation

Musiyano $modal-fade-transformunotara mamiriro eshanduko .modal-dialogisati yaita modal fade-mu animation, $modal-show-transformshanduko inotara shanduko .modal-dialogyepanoperera modal fade-in animation.

Kana iwe uchida semuenzaniso zoom-in animation, unogona kuseta $modal-fade-transform: scale(.8).

Bvisa animation

Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fadekirasi kubva pane yako modal markup.

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

Dynamic heights

Kana hurefu hwe modal huchichinja ichiri kuvhurika, iwe unofanirwa kufona myModal.handleUpdate()kuti ugadzirise chinzvimbo che modal kuitira kana scrollbar ikaoneka.

Accessibility

Iva nechokwadi chekuwedzera aria-labelledby="...", uchireva zita re modal, ku .modal. Pamusoro pezvo, iwe unogona kupa tsananguro yemodal dialog yako ne aria-describedbypa .modal. Ziva kuti haufanire kuwedzera role="dialog"sezvo isu tatozviwedzera kuburikidza neJavaScript.

Kubatanidza mavhidhiyo eYouTube

Kuisa mavhidhiyo eYouTube mumodals kunoda yekuwedzera JavaScript isiri muBootstrap kuti imise otomatiki kutamba nezvimwe. Ona iyi inobatsira Stack Overflow post kuti uwane rumwe ruzivo.

Optional sizes

Modals ine matatu esarudzo saizi, anowanikwa kuburikidza ne modifier makirasi kuti aiswe pa .modal-dialog. Aya saizi anopinda mune mamwe mabreakpoints kudzivirira akachinjika scrollbar pane nhete dzekutarisa.

Size Kirasi Modal max-width
Diki .modal-sm 300px
Default Hapana 500px
Zvikuru .modal-lg 800px
Kuwedzera kukuru .modal-xl 1140px

Yedu default modal isina modifier kirasi inoumba "yepakati" saizi modal.

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

Fullscreen Modal

Imwe yakawedzera isarudzo yekuburitsa modal inovhara mushandisi yekutarisa, inowanikwa kuburikidza ne modifier makirasi anoiswa pane .modal-dialog.

Kirasi Kuwanikwa
.modal-fullscreen Nguva dzose
.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

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, modals ikozvino dzinoshandisa emunharaunda CSS variables pa .modaluye .modal-backdropyekusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

  --#{$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};

Sass zvakasiyana

$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);

Loop

Inopindura yakazara skrini modhi inogadzirwa kuburikidza $breakpointsnemepu uye loop mu 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;
      }
    }
  }
}

Usage

Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo zvakare inodarika maitiro ekusagadzika ekupurudzira uye inogadzira .modal-backdropkuti ipe nzvimbo yekudzvanya yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.

Via data hunhu

Toggle

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

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Zita Type Default Tsanangudzo
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 Inoparadza modal yechinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
getInstance Static nzira iyo inokutendera iwe kuti uwane iyo modal muenzaniso yakabatana neiyo DOM chinhu.
getOrCreateInstance Static nzira iyo inokutendera iwe kuti uwane modal muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.
handleUpdate Rongedza nemaoko chinzvimbo che modal kana kureba kwe modal ikachinja payakavhurika (kureva kuti kana scrollbar ikabuda).
hide Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modalchiitiko chisati chaitika).
show Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modalchiitiko chisati chaitika). Zvakare, iwe unogona kupfuudza chinhu cheDOM senharo inogona kugamuchirwa mune modal zviitiko (senzvimbo relatedTarget). (kureva const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modalkana hidden.bs.modalchiitiko chisati chaitika).

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro. Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">).

Chiitiko Tsanangudzo
hide.bs.modal Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
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...
})