Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Модал

Васлкунаки модалии JavaScript-и Bootstrap-ро барои илова кардани муколамаҳо ба сайти худ барои қуттиҳои равшанӣ, огоҳиҳои корбар ё мундариҷаи комилан фармоишӣ истифода баред.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Пеш аз оғози кор бо ҷузъи модалии Bootstrap, боварӣ ҳосил кунед, ки зеринро хонед, зеро имконоти менюи мо ба наздикӣ тағир ёфтанд.

  • Модалҳо бо HTML, CSS ва JavaScript сохта шудаанд. Онҳо дар болои ҳама чизи дигаре дар ҳуҷҷат ҷойгир шудаанд ва ҳаракатро аз он хориҷ кунед, <body>то мундариҷаи модалӣ ба ҷои он ҳаракат кунад.
  • Ангуштзании модали "замина" ба таври худкор модалиро мепӯшонад.
  • Bootstrap дар як вақт танҳо як равзанаи модалиро дастгирӣ мекунад. Модалҳои дохилӣ дастгирӣ намешаванд, зеро мо боварӣ дорем, ки онҳо таҷрибаи ками корбаранд.
  • Модалҳо истифода мебаранд position: fixed, ки баъзан метавонад дар бораи намоиши он каме мушаххас бошад. То ҳадди имкон, HTML модалии худро дар сатҳи боло ҷойгир кунед, то аз дахолати эҳтимолӣ аз дигар унсурҳо канорагирӣ кунед. Эҳтимол шумо ҳангоми ҷойгир кардани як .modalэлементи собит дигар ба мушкилот дучор мешавед.
  • Бори дигар, аз сабаби position: fixed, баъзе огоҳиҳо дар бораи истифодаи модальҳо дар дастгоҳҳои мобилӣ вуҷуд доранд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред.
  • Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, атрибути autofocusHTML дар modalҳои Bootstrap ҳеҷ гуна таъсире надорад. Барои ноил шудан ба ҳамон таъсир, якчанд JavaScript-и фармоиширо истифода баред:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Хонданро барои намоишҳо ва дастурҳои истифода идома диҳед.

Мисолхо

Дар зер намунаи модалии статикӣ оварда шудааст (маънои он positionва displayбекор карда шудааст). Сарлавҳаи модалӣ, бадани модалӣ (барои 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>

Заминаи статикӣ

Вақте ки замина ба статикӣ муқаррар карда шудааст, модаль ҳангоми пахш кардани берун аз он пӯшида намешавад. Барои санҷидани он тугмаи зерро пахш кунед.

<!-- 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ба .modal-dialogмаркази амудии модаль.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

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

Маслиҳатҳо ва поповҳо

Маслиҳатҳо ва поповҳоро дар ҳолати зарурӣ дар дохили модальҳо ҷойгир кардан мумкин аст . Вақте ки модалҳо баста мешаванд, ҳама гуна маслиҳатҳои асбобҳо ва попопверҳо дар дохили он низ ба таври худкор хориҷ карда мешаванд.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Истифодаи шабака

Истифодаи системаи шабакаи Bootstrap дар дохили модалӣ тавассути лона .container-fluidдар дохили .modal-body. Сипас, синфҳои муқаррарии системаи шабакавиро ҳамчун дар ҷои дигар истифода баред.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Мундариҷаи гуногуни моддӣ

Оё як даста тугмаҳо доред, ки ҳамаашон як модальро бо мундариҷаи каме фарқ мекунанд? Атрибутҳо event.relatedTargetва HTMLdata-bs-* -ро истифода баред, то мундариҷаи модалро вобаста ба он ки тугмача пахш карда шудааст, тағйир диҳед .

Дар зер намоиши зинда ва намунаи HTML ва JavaScript оварда шудааст. Барои маълумоти иловагӣ, ҳуҷҷатҳои рӯйдодҳои модалиро барои тафсилот дар бораи relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Гузариш байни модальҳо

Гузариш байни модальҳои сершумор бо ҷойгиркунии оқилонаи data-bs-targetатрибутҳо data-bs-toggle. Масалан, шумо метавонед як модули барқароркунии паролро аз дохили аломати аллакай кушодашуда дар модали иваз кунед. Лутфан қайд кунед, ки якчанд модальҳо дар як вақт кушода намешаванд - ин усул танҳо байни ду модали алоҳида иваз мекунад.

Модали аввалро кушоед 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="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" data-bs-dismiss="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дар охири аниматсияи пажмурдашудаи модалиро муайян мекунад.

Агар шумо хоҳед, масалан, аниматсияи васеъкуниро, шумо метавонед танзим кунед $modal-fade-transform: scale(.8).

Аниматсияро нест кунед

Барои модальҳое, ки ба ҷои он ки барои дидан пажмурда шаванд, пайдо мешаванд, .fadeсинфро аз аломатгузории модалии худ хориҷ кунед.

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

Баландии динамикӣ

Агар баландии модаль ҳангоми кушода будани он тағир ёбад, шумо бояд занг занед myModal.handleUpdate(), то мавқеъи модалро дар сурати пайдо шудани сатри паймоиш дубора танзим кунед.

Дастрасӣ

Ҳатман илова кунед aria-labelledby="...", ки бо истинод ба унвони модалӣ ба .modal. Илова бар ин, шумо метавонед тавсифи муколамаи модалии худро бо aria-describedbyon .modal. Дар хотир доред, ки ба шумо лозим нест, ки илова кунед, role="dialog"зеро мо онро аллакай тавассути JavaScript илова кардаем.

Ҷойгиркунии видеоҳои YouTube

Ҷойгиркунии видеоҳои YouTube дар модальҳо JavaScript-и иловагиро талаб мекунад, ки на дар Bootstrap барои худкор қатъ кардани бозиҳо ва ғайра. Барои маълумоти бештар ба ин пости муфиди Stack Overflow нигаред.

Андозаҳои ихтиёрӣ

Модалҳо се андозаи ихтиёрӣ доранд, ки тавассути синфҳои тағирдиҳанда барои ҷойгир кардани .modal-dialog. Ин андозаҳо дар нуқтаҳои муайян ба кор медароянд, то аз наворҳои ҳаракати уфуқӣ дар портҳои бознигарии тангтар канорагирӣ кунанд.

Андоза Синф Паҳнои максималии модалӣ
Хурд .modal-sm 300px
Пешфарз Ҳеҷ 500px
Калон .modal-lg 800px
Хеле калон .modal-xl 1140px

Модали пешфарзии мо бидуни синфи тағирдиҳанда модали андозаи "миёна" -ро ташкил медиҳад.

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

Модали пурра экран

Боз як бекоркунӣ ин имкони пайдо кардани модалиест, ки порти намоиши корбарро фаро мегирад ва тавассути синфҳои тағирдиҳандае, ки дар .modal-dialog.

Синф Мавҷудият
.modal-fullscreen Ҳамеша
.modal-fullscreen-sm-down Дар поён576px
.modal-fullscreen-md-down Дар поён768px
.modal-fullscreen-lg-down Дар поён992px
.modal-fullscreen-xl-down Дар поён1200px
.modal-fullscreen-xxl-down Дар поён1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Сасс

Тағйирёбандаҳо

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Доира

Модалҳои пурра экрани ҷавобгӯ тавассути $breakpointsхарита ва ҳалқа дар scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

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

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Истифода

Васлкунаки модалӣ мундариҷаи пинҳонии шуморо бо дархост тавассути атрибутҳои додаҳо ё JavaScript иваз мекунад. Он инчунин рафтори пешфарзии пешфарзро бекор мекунад ва .modal-backdropбарои фароҳам овардани майдони клик барои рад кардани модальҳои нишондодашуда ҳангоми клик берун аз модаль тавлид мекунад.

Тавассути атрибутҳои додаҳо

Модалро бе навиштани JavaScript фаъол созед. Дар data-bs-toggle="modal"як унсури контроллер, ба монанди тугма, дар якҷоягӣ бо як data-bs-target="#foo"ё href="#foo"ҳадафи модали мушаххас барои иваз кардан насб кунед.

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

Тавассути JavaScript

Модалро бо як сатри JavaScript эҷод кунед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-bs-монанди замима кунед data-bs-backdrop="".

Ном Навъи Пешфарз Тавсифи
backdrop булӣ ё сатр'static' true Унсури модаль-заминаро дар бар мегирад. Интихобан, staticбарои заминае муайян кунед, ки модальро бо клик намепӯшад.
keyboard булӣ true Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад
focus булӣ true Ҳангоми оғозёбӣ таваҷҷӯҳро ба модаль мегузорад.

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

Вариантҳои гузариш

Мундариҷаи шуморо ҳамчун модаль фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

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

иваз кардан

Модалро дастӣ иваз мекунад. Ба зангзананда пеш аз он ки модаль воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.modalё ҳодиса) бармегардад.hidden.bs.modal

myModal.toggle()

нишон додан

Модалро дастӣ мекушояд. Ба зангзананда пеш аз намоиши модаль (яъне пеш аз shown.bs.modalрух додани ҳодиса) бармегардад.

myModal.show()

Инчунин, шумо метавонед як унсури DOM-ро ҳамчун далел гузаронед, ки онро дар рӯйдодҳои модалӣ қабул кардан мумкин аст (ҳамчун relatedTargetмоликият).

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

пинҳон

Модалро дастӣ пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани модаль (яъне пеш аз hidden.bs.modalрух додани ҳодиса) бармегардад.

myModal.hide()

коркарди Навсозӣ

Мавқеи модальро ба таври дастӣ аз нав танзим кунед, агар баландии модаль ҳангоми кушода будани он тағир ёбад (яъне дар сурати пайдо шудани лавҳаи ҳаракат).

myModal.handleUpdate()

ихтиёр кардан

Модали элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)

myModal.dispose()

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред

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

getOrCreateInstance

Усули статикӣ , ки ба шумо имкон медиҳад, ки намунаи модалии бо унсури DOM алоқамандро ба даст оред ё дар сурати ба кор андохта нашудани он намунаи нав эҷод кунед.

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

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад. Ҳама рӯйдодҳои модалӣ ба худи модал (яъне дар <div class="modal">) тирандозӣ карда мешаванд.

Навъи ҳодиса Тавсифи
show.bs.modal Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад. Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст.
shown.bs.modal Ин ҳодиса вақте оғоз мешавад, ки модаль барои корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст.
hide.bs.modal Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.modal Ин ҳодиса пас аз анҷоми пинҳон кардани модаль аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hidePrevented.bs.modal Ин ҳодиса ҳангоми нишон додани модаль, пасзаминаи он staticва клик берун аз модаль ё пахши тугмаи фирор бо имконоти клавиатура ё data-bs-keyboardба false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})