Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Modal

Diriša polaka ya mokgwa wa JavaScript ya Bootstrap go oketša dipoledišano saeteng ya gago bakeng sa mapokisi a seetša, ditsebišo tša modiriši, goba diteng tša tlwaelo ka mo go feletšego.

Letlakaleng le

Kamoo e šomago ka gona

Pele o thoma ka karolo ya modal ya Bootstrap, kgonthišetša gore o bala tše di latelago ka ge dikgetho tša rena tša thepo di sa tšwa go fetoga.

  • Di-modal di agilwe ka HTML, CSS, le JavaScript. Ba beilwe godimo ga se sengwe le se sengwe ka go tokomane gomme ba tloša go phutholla go tšwa go <body>gore diteng tša modal di phutholle go e na le moo.
  • Tobetsa ka modal “backdrop” tla ka tsela e iketsang koala modal.
  • Bootstrap e thekga feela lefasetere le tee la modal ka nako. Di-modal tše di tsentšwego ka gare ga di-nested ga di thekgwe ka ge re dumela gore ke maitemogelo a mabe a modiriši.
  • Modals use position: fixed, yeo ka dinako tše dingwe e ka bago e kgethegilego go se nene ka phetolelo ya yona. Nako le nako ge go kgonega, bea HTML ya gago ya modal maemong a maemo a godimo go efoga tšhitišo yeo e ka bago gona go tšwa go dielemente tše dingwe. Go na le kgonagalo ya gore o tla thulana le ditaba ge o bea a .modalka gare ga elemente ye nngwe ye e sa fetogego.
  • Hape, ka lebaka la position: fixed, ho na le ba bang ba caveats le ho sebelisa modals ka disebediswa tsa selefouno. Bona ditokomane tša rena tša thekgo ya sephephediši bakeng sa dintlha.
  • Ka lebaka la ka moo HTML5 e hlalošago semantiki ya yona, seka sa autofocusHTML ga se na mafelelo ka go dimodal tša Bootstrap. Go fihlelela mafelelo a swanago, diriša JavaScript e itšego ya tlwaelo:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Tšwela pele o bala bakeng sa di-demo le ditlhahlo tša tšhomišo.

Mehlala

Ka tlase ke mohlala wa modal wa go se fetogeposition (go ra gore wa yona le displayba fedile ka thoko). Go akareditšwe ke hlogo ya modal, mmele wa modal (o nyakegago bakeng sa padding), le letlakala la ka tlase la modal (ya boikgethelo). Re kgopela gore o akaretše dihlogo tša modal ka ditiro tša go raka neng le neng ge go kgonega, goba o nee kgato ye nngwe ya go raka ye e lego pepeneneng.

Thaetlele ya Modal

Sengwalwa sa mmele sa modal se ya mo.

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

Demo e phelang

Toggle e sebetsang modal demo ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

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

Lemorago la go se fetoge

Ge backdrop e beakantšwe go static, modal e ka se tswalele ge o klika ka ntle ga yona. Tobetsa konopo e ka tlase ho e leka.

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

Go kgokološa diteng tše telele

Ge di-modal di e-ba tše telele kudu bakeng sa lefelo la go lebelela la modiriši goba sedirišwa, di sepelasepela di ikemetše ka letlakaleng ka bolona. Leka demo ye e lego ka mo tlase go bona seo re se bolelago.

O ka hlama gape le modal ye e ka kgokologago yeo e dumelelago go sepelasepela mmele wa modal ka go tlaleletša .modal-dialog-scrollablego .modal-dialog.

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

E tsepame thwii

Oketša .modal-dialog-centeredgo .modal-dialoggo thwii bogareng bja 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>

Dikeletšo tša didirišwa le di-popovers

Tooltips le popovers di ka bewa ka gare ga modals ge go nyakega. Ge di-modal di tswalelwa, didirišwa dife goba dife le di-popover ka gare le tšona di a lahlwa ka go iketla.

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

Go diriša keriti

Diriša tshepedišo ya keriti ya Bootstrap ka gare ga modal ka go bea dihlaga .container-fluidka gare ga .modal-body. Ka morago, diriša diklase tše di tlwaelegilego tša tshepedišo ya keriti bjalo ka ge o be o tla dira kae goba kae.

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

Diteng tša modal tše di fapanego

Na o na le sehlopha sa dikonope tšeo ka moka di hlohleletšago modal e swanago ka dikagare tše di fapanego ganyenyane? Šomiša event.relatedTargetle dika tša HTMLdata-bs-* go fapantšha dikagare tša modal go ya ka gore ke konope efe yeo e klikilwego.

Ka tlase ke demo e phelang e latelwa ke mohlala HTML le JavaScript. Bakeng sa tshedimošo ye ntši, bala ditokomane tša ditiragalo tša modal bakeng sa dintlha ka ga 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
})

Toggle pakeng tsa modals

Toggle pakeng tsa modal multiple le ba bang ba bohlale beha ya data-bs-targetle data-bs-togglelitšobotsi. Ka mohlala, o ka fetola modal ya go seta gape phasewete go tšwa ka gare ga leswao leo le šetšego le bulegile ka gare ga modal. Hle ela hloko gore di-modal tše dintši di ka se bulege ka nako e tee —mokgwa wo o fo fetoša magareng ga di-modal tše pedi tše di aroganego.

Bula pele modal 
<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>

Fetola ditshwantsho tse di phelang

The feto- $modal-fade-transformfetohang e laola boemo ba fetola ba .modal-dialogpele ho modal fifala-ka animatsioon, $modal-show-transformphetoho e laola phetoho ea .modal-dialogqetellong ea modal fifala-ka animatsioon.

Ge o nyaka mohlala animation ya go godiša, o ka beakanya $modal-fade-transform: scale(.8).

Tlosa ditshwantsho tse di phelang

Bakeng sa di-modal tšeo di fo tšwelelago go e na le go fifala ka gare go lebelela, tloša .fadesehlopha go tšwa go leswao la gago la modal.

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

Bophahamo ba mafolofolo

Ge e le gore bophagamo bja modal bo fetoga ge e bulegile, o swanetše go bitša myModal.handleUpdate()go beakanya gape maemo a modal ge go ka direga gore go tšwelele bara ya go sepelasepela.

Phihlelelo

Kgonthiša gore o tlaleletša aria-labelledby="...", o šupa sehlogo sa modal, go .modal. Go tlaleletša, o ka fa tlhalošo ya poledišano ya gago ya modal ka aria-describedbygo .modal. Hlokomela gore ga go nyakege gore o tlaleletše role="dialog"ka ge re šetše re e tlaleletša ka JavaScript.

Go tsenya dibidio tša YouTube

Go tsenya dibidio tša YouTube ka gare ga modals go nyaka JavaScript ya tlaleletšo e sego ka go Bootstrap go emiša ka go iketla go bapala le tše dingwe. Bona poso ye e thušago ya Stack Overflow bakeng sa tshedimošo e oketšegilego.

Bogolo bja boikgethelo

Di-modal di na le bogolo bjo bo tharo bja boikhethelo, bjo bo hwetšagalago ka dihlopha tša sefetoši tšeo di tlago go bewa godimo ga .modal-dialog. Bogolo bjo bo tsena ka gare ga mafelo a itšego a go kgaotša go efoga dibara tša go sepelasepela tše di rapaletšego go dipono tše tshesane.

Bogolo Phapoši Modal max-bophara
Nnyane .modal-sm 300px
Hlokomologa Ga go selo 500px
Kgolo .modal-lg 800px
E kgolo e eketsehileng .modal-xl 1140px

Modal ya rena ya go se fetoge ntle le sehlopha sa sefetoši se bopa modal ya bogolo bja “magareng”.

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

Modal ya skrine se se tletšego

Go tloša mo gongwe ke kgetho ya go tšwelela modal yeo e akaretšago lefelo la go lebelela la mosediriši, leo le hwetšagalago ka dihlopha tša sefetoši tšeo di beilwego godimo ga .modal-dialog.

Phapoši Go hwetšagala
.modal-fullscreen Ka mehla
.modal-fullscreen-sm-down Ka fase576px
.modal-fullscreen-md-down Ka fase768px
.modal-fullscreen-lg-down Ka fase992px
.modal-fullscreen-xl-down Ka fase1200px
.modal-fullscreen-xxl-down Ka fase1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Diphetogo

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

Segole

Di-modal tša skrine se se tletšego tšeo di arabelago di tšweletšwa ka $breakpointsmmapa le seloupu ka 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);
      }
    }
  }
}

Tšhomišo

Plugin ya modal e fetoša diteng tša gago tše di utilwego ge di nyakega, ka dika tša datha goba JavaScript. E bile e tloša boitshwaro bja go kgokološa bja go se fetoge gomme e tšweletša a .modal-backdropgo fa lefelo la go klika bakeng sa go lahla di-modal tše di bontšhitšwego ge o kgotla ka ntle ga modal.

Ka dika ya data

Toggle

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-bs-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-bs-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

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

Raka

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga modal bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba godimo ga konope ka ntle ga modal o šomiša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Le ge ditsela tše ka bobedi tša go raka modal di thekgwa, dula o gopola gore go raka go tšwa ka ntle ga modal ga go swane le mohlala wa tlhamo ya poledišano ya modal ya WAI-ARIA . Dira se ka go ipea kotsing.

Ka JavaScript

Hlama modal ka mola o tee wa JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-backdrop="".

Leina Mohuta Hlokomologa Tlhalošo
backdrop boolean goba thapo'static' true E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego modal ka go klika.
keyboard boolean ya go swana true E tswalela modal ge senotlelo sa go tšhaba se tobetšwe
focus boolean ya go swana true E bea tsepamiso ya kgopolo go modal ge e thongwa.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

Dikgetho tša go feta

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

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

go fetola

Ka seatla e fetola modal. E boela go mogala pele ga ge modal e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.modalgoba hidden.bs.modale direga).

myModal.toggle()

bontšha

Ka letsoho bula e modal. E boela go mogala pele ga ge modal e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.modaltiragalo e direga).

myModal.show()

Gape, o ka fetiša elemente ya DOM bjalo ka ngangišano yeo e ka amogelwago ka ditiragalong tša modal (bjalo ka relatedTargetthepa).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

fihla

Ka seatla e pata modal. E boela go mogala pele ga ge modal e tloga e utilwe (ke gore pele ga ge hidden.bs.modaltiragalo e direga).

myModal.hide()

handleUpdate

Beakanya gape ka seatla maemo a modal ge e le gore bophagamo bja modal bo fetoga ge e bulegile (ke gore ge go ka direga gore go tšwelele bara ya go sepelasepela).

myModal.handleUpdate()

lahla

E senya modal ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)

myModal.dispose()

hwetšaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa modal wo o amanago le elemente ya DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

hwetšaGobaHlamaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa modal wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso. Ditiragalo ka moka tša modal di thuntšhwa go modal ka boyona (ke gore go <div class="modal">).

Mohuta wa tiragalo Tlhalošo
show.bs.modal Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
shown.bs.modal Tiragalo ye e thuntšhwa ge modal e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
hide.bs.modal Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
hidden.bs.modal Tiragalo ye e thuntšhwa ge modal e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
hidePrevented.bs.modal Tiragalo ye e thuntšhwa ge modal e bontšhwa, mokokotlo wa yona ke staticgomme go klika ka ntle ga modal goba go tobetša senotlelo sa go tšhaba go dirwa ka kgetho ya khiiboto goba data-bs-keyboarde beakantšwe go false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})