Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
Check
in English

Modali

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript ya Bootstrap kuti muwonjezere zokambirana patsamba lanu la mabokosi opepuka, zidziwitso za ogwiritsa ntchito, kapena zomwe mumakonda.

Patsamba ili

Momwe zimagwirira ntchito

Musanayambe ndi gawo la Bootstrap, onetsetsani kuti mwawerenga zotsatirazi popeza zosankha zathu zasintha posachedwa.

  • Ma modals amapangidwa ndi HTML, CSS, ndi JavaScript. Iwo ali pamwamba pa china chirichonse mu chikalatacho ndi kuchotsa mpukutu <body>kuti modal zolembedwa mipukutu m'malo.
  • Kusindikiza pa modal "backdrop" kudzatseka modal.
  • Bootstrap imathandizira zenera limodzi la modal nthawi imodzi. Makhalidwe a Nested sagwiritsidwa ntchito chifukwa timakhulupirira kuti sagwiritsa ntchito bwino.
  • Ma Modals amagwiritsa ntchito position: fixed, zomwe nthawi zina zimatha kukhala zodziwika bwino pakumasulira kwake. Ngati n'kotheka, ikani HTML yanu pamalo apamwamba kuti musasokonezedwe ndi zinthu zina. Mutha kukumana ndi zovuta mukamanga zisa .modalmkati mwa chinthu china chokhazikika.
  • Apanso, chifukwa cha position: fixed, pali machenjezo ogwiritsira ntchito ma modals pazida zam'manja. Onani zolemba zathu zothandizira msakatuli kuti mumve zambiri.
  • Chifukwa cha momwe HTML5 imatanthauzira semantics yake, mawonekedwe a autofocusHTML alibe mphamvu mu ma modals a Bootstrap. Kuti mukwaniritse zomwezo, gwiritsani ntchito JavaScript yokhazikika:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Pitilizani kuwerenga ma demo ndi malangizo ogwiritsira ntchito.

Zitsanzo

Pansipa pali static modal chitsanzo (kutanthauza zake positionndipo displayzasinthidwa). Kuphatikizidwa ndi mutu wa modal, thupi la modal (lofunikira padding) ndi modal footer (posankha). Tikukupemphani kuti muphatikizepo mitu yamutu yokhala ndi zochita zochotsa ngati kuli kotheka, kapena muperekepo kanthu kena kochotsa.

Mutu wa Modal

Mawu a Modal amapita apa.

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

Chiwonetsero chamoyo

Sinthani mawonekedwe ogwirira ntchito podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.

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

Zosasunthika

Kumbuyo kukakhala static, modal sitseka mukadina kunja kwake. Dinani batani pansipa kuti muyese.

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

Kusuntha zinthu zazitali

Ma mods akakhala ataliatali kwambiri kuti ayang'ane ndi wogwiritsa ntchito kapena chipangizo, amasuntha mosadalira tsambalo. Yesani chiwonetsero pansipa kuti muwone zomwe tikutanthauza.

Mukhozanso kupanga modal scrollable yomwe imalola kusuntha thupi la modal powonjezera .modal-dialog-scrollableku .modal-dialog.

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

Chokhazikika pakati

Onjezani .modal-dialog-centeredku .modal-dialogmolunjika pakati pa modali.

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

Zida ndi popovers zitha kuyikidwa m'ma modal ngati pakufunika . Ma modals akatsekedwa, zida zilizonse ndi ma popovers mkati mwake amachotsedwanso.

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

Kugwiritsa ntchito grid

Gwiritsani ntchito gridi ya Bootstrap mkati mwa modal pomanga zisa .container-fluidmkati mwa .modal-body. Kenako, gwiritsani ntchito makalasi amtundu wa grid monga momwe mungachitire kwina kulikonse.

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

Mitundu yosiyanasiyana ya modal

Muli ndi mabatani angapo omwe onse amayambitsa modali yofanana ndi zomwe zili zosiyana pang'ono? Gwiritsani ntchito event.relatedTargetndi mawonekedwe a HTML data-bs-*kuti musinthe zomwe zili mu modal kutengera batani lomwe ladina.

Pansipa pali chiwonetsero chamoyo chotsatiridwa ndi chitsanzo cha HTML ndi JavaScript. Kuti mumve zambiri, werengani zolemba zamodal zochitika kuti mumve zambiri 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
})

Sinthani pakati pa ma modals

Sinthani pakati pa ma mods angapo ndikuyika mochenjera kwa data-bs-targetndi mawonekedwe data-bs-toggle. Mwachitsanzo, mutha kusintha modal yokhazikitsira mawu achinsinsi kuchokera mu modal yotsegulidwa kale. Chonde dziwani kuti ma mods angapo sangatsegulidwe nthawi imodzi - njira iyi imangosintha pakati pa mitundu iwiri yosiyana.

Tsegulani njira yoyamba
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>

Sinthani makanema ojambula

Kusinthaku $modal-fade-transformkumatsimikizira kusintha kwa .modal-dialogmakanema ojambula a modal fade-in, $modal-show-transformkusintha kumatsimikizira kusintha kwa .modal-dialogkumapeto kwa makanema ojambula pa modal fade-in.

Ngati mukufuna mwachitsanzo makanema ojambula pazithunzi, mutha kukhazikitsa $modal-fade-transform: scale(.8).

Chotsani makanema ojambula

Kwa ma mods omwe amangowoneka m'malo mozimiririka kuti awoneke, chotsani .fadekalasiyo pazolemba zanu.

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

Matali amphamvu

Ngati kutalika kwa modal kumasintha pamene ili yotseguka, muyenera kuyimba myModal.handleUpdate()kuti mukonzenso malo a modal ngati scrollbar ikuwoneka.

Kufikika

Onetsetsani kuti muwonjezere aria-labelledby="...", kutengera mutu wa modal, ku .modal. Kuphatikiza apo, mutha kufotokoza za dialog yanu ya modal ndi aria-describedbypa .modal. Dziwani kuti simukuyenera kuwonjezera role="dialog"popeza tidawonjezera kale kudzera pa JavaScript.

Kuyika makanema a YouTube

Kuyika makanema a YouTube mu ma modals kumafuna JavaScript yowonjezera osati mu Bootstrap kuti asiye kusewera ndi zina zambiri. Onani positi yothandiza ya Stack Overflow kuti mumve zambiri.

Zosankha zazikulu

Ma Modals ali ndi masaizi atatu osasankha, omwe amapezeka kudzera pamagulu osintha kuti ayikidwe pa .modal-dialog. Kukula uku kumayambira pazipata zina kuti mupewe zopingasa zopingasa pamawonekedwe ocheperako.

Kukula Kalasi Modal max-width
Wamng'ono .modal-sm 300px
Zosasintha Palibe 500px
Chachikulu .modal-lg 800px
Chachikulu kwambiri .modal-xl 1140px

Modal yathu yosasinthika yopanda kalasi yosinthira imapanga "zapakatikati" kukula kwake.

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

Fullscreen Modal

Chowonjezera china ndi njira yopangira modal yomwe imakhudza mawonekedwe a ogwiritsa ntchito, yomwe imapezeka kudzera pamagulu osintha omwe amayikidwa pa .modal-dialog.

Kalasi Kupezeka
.modal-fullscreen Nthawizonse
.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

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, ma mods tsopano amagwiritsa ntchito zosintha za CSS zakumaloko .modalndikusintha .modal-backdropmakonda anthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Zosintha za Sass

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

Lupu

Mawonekedwe omvera a sikirini yonse amapangidwa kudzera $breakpointspamapu ndi kuzungulira 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;
      }
    }
  }
}

Kugwiritsa ntchito

Pulogalamu yowonjezera ya modal imasintha zinthu zanu zobisika mukafuna, kudzera pa data kapena JavaScript. Imadutsanso machitidwe osasinthika osasunthika ndikupanga a .modal-backdropkuti apereke malo odina kuti muchotse ma modal owonetsedwa mukadina kunja kwa modal.

Kudzera muzochita za data

Sinthani

Yambitsani modali osalemba JavaScript. Khazikitsani data-bs-toggle="modal"chinthu chowongolera, ngati batani, limodzi ndi data-bs-target="#foo"kapena href="#foo"kutsata njira inayake kuti musinthe.

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

Chotsani

Kuthamangitsidwa kumatha kutheka ndi lingaliro lomwe lili datapa batani mkati mwa modal monga momwe zasonyezedwera pansipa:

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

kapena pa batani kunja kwa modali pogwiritsa ntchito data-bs-targetzomwe zili pansipa:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Ngakhale njira zonse ziwiri zochotsera modali zimathandizidwa, kumbukirani kuti kutulutsa kunja kwa modal sikufanana ndi ARIA Authoring Practices Guide dialog (modal) pattern . Chitani izi mwakufuna kwanu.

Kudzera pa JavaScript

Pangani modali ndi mzere umodzi wa JavaScript:

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

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Dzina Mtundu Zosasintha Kufotokozera
backdrop boolean,'static' true Mulinso modal-backdrop element. Kapenanso, tchulani staticzakumbuyo zomwe sizitseka modali mukadina.
focus boolean true Imayika chidwi pa modal ikakhazikitsidwa.
keyboard boolean true Amatseka modal pamene kiyi yothawa ikanikizidwa.

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Zosankha zodutsa

Imayambitsa zomwe zili ngati modal. Imavomereza zomwe mungachite object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Njira Kufotokozera
dispose Imawononga modali ya chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM)
getInstance Njira yosasunthika yomwe imakupatsani mwayi wopeza modal yolumikizidwa ndi chinthu cha DOM.
getOrCreateInstance Njira yosasunthika yomwe imakupatsani mwayi woti mugwirizane ndi chinthu cha DOM, kapena pangani yatsopano ngati sichinayambike.
handleUpdate Sinthani pamanja malo a modal ngati kutalika kwa modali kukusintha pamene ili lotseguka (mwachitsanzo, ngati mpukutu utawonekera).
hide Amabisa pamanja modali. Imabwereranso kwa woyimbira foniyo isanabisike (ie zisanachitike hidden.bs.modal).
show Pamanja amatsegula modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe (ie zisanachitike shown.bs.modal). Komanso, mutha kudutsa gawo la DOM ngati mkangano womwe ungalandilidwe muzochitika za modal (monga relatedTargetkatundu). (ie const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Imatembenuza pamanja modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe kapena kubisidwa (ie zisanachitike shown.bs.modalkapena hidden.bs.modalchochitikacho).

Zochitika

Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal. Zochitika zonse za modal zimachotsedwa pa modal yokha (ie pa <div class="modal">).

Chochitika Kufotokozera
hide.bs.modal Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
hidden.bs.modal Chochitikachi chimachotsedwa pamene modal yatha kubisidwa kwa wogwiritsa ntchito (idikira kuti kusintha kwa CSS kumalize).
hidePrevented.bs.modal Chochitikachi chimachotsedwa pamene modal ikuwonetsedwa, maziko ake ndi statickudina kunja kwa modal kumachitika. Chochitikacho chimathamangitsidwanso pamene chinsinsi chothawa chikanikizidwa ndipo keyboardnjirayo imayikidwa false.
show.bs.modal Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa. Ngati chifukwa cha kudina, chinthu chodina chimapezeka ngati relatedTargetkatundu wa chochitikacho.
shown.bs.modal Chochitikachi chimachotsedwa pamene modal yawonetsedwa kwa wogwiritsa ntchito (idzadikirira kuti kusintha kwa CSS kumalize). Ngati chifukwa cha kudina, chinthu chodina chimapezeka ngati relatedTargetkatundu wa chochitikacho. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})