Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Модаль

Bootstrap'ның JavaScript модаль плагинын кулланыгыз, сезнең сайтка яктырткычлар, кулланучы хәбәрләре яки тулысынча махсус эчтәлек өчен диалоглар өстәү.

Бу биттә

Ничек бу эшли

Bootstrap'ның модаль компоненты белән башлар алдыннан, түбәндәгеләрне укыгыз, чөнки безнең меню вариантлары күптән түгел үзгәрде.

  • Модальләр HTML, CSS һәм JavaScript белән төзелгән. Алар документтагы бүтәннәр өстендә урнашканнар һәм <body>модаль эчтәлек урынына әйләндерү өчен әйләндерүне алып куялар.
  • Модаль "фон" га басыгыз, модаль автоматик рәвештә ябылачак.
  • Bootstrap берьюлы бер модаль тәрәзәгә ярдәм итә. Ояланган модальләр ярдәм итми, чөнки без аларны начар кулланучылар тәҗрибәсе дип саныйбыз.
  • Модальләр куллану position: fixed, алар күрсәтү турында кайвакыт бераз аерылып торырга мөмкин. Мөмкин булганда, башка элементларның потенциаль комачаулавын булдырмас өчен, модаль HTML-ны югары дәрәҗәдәге позициягә урнаштырыгыз. .modalБашка тотрыклы элемент эчендә оя корганда сез, мөгаен, проблемаларга эләгерсез .
  • Тагын бер тапкыр, шуңа күрә position: fixed, мобиль җайланмаларда модаль куллану белән кайбер саклыклар бар. Детальләр өчен безнең браузер ярдәм документларын карагыз .
  • HTML5 аның семантикасын ничек билгеләгәнгә , autofocusHTML атрибутының Bootstrap модалларында бернинди тәэсире юк. Шул ук эффектка ирешү өчен, кайбер JavaScript кулланыгыз:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Челтәр куллану

Bootstrap челтәр системасын модаль эчендә .container-fluidкулланыгыз .modal-body. Аннары, гадәти челтәр системасы классларын бүтәннәрдәге кебек кулланыгыз.

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

Төрле модаль эчтәлек

Бераз модальне бераз төрле эчтәлек белән эшләтеп җибәрүче төймәләр бармы? Кайсы төймәгә басылганына карап модальнең эчтәлеген үзгәртү өчен event.relatedTargetHTML атрибутларын data-bs-*кулланыгыз .

Түбәндә HTML һәм JavaScript үрнәге күрсәтелгән тере демо. Күбрәк мәгълүмат алу өчен, модаль вакыйгалар документларын укыгызrelatedTarget .

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

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

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Модальләр арасына күчә

Берничә модальне data-bs-targetһәм data-bs-toggleатрибутларны акыллы урнаштыру белән алыштырыгыз. Мисал өчен, сез серсүзне яңадан торгызу модалын модальдә инде ачык билге эчендә алыштыра аласыз. Зинһар, берничә модаль берьюлы ачык була алмый - бу ысул ике аерым модаль арасында күчә.

Беренче модальне ач
html 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Анимацияне үзгәртү

Theзгәргеч модаль сүнгән анимация алдыннан үзгәрү $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-describedbyаласыз .modal. Игътибар итегез, сез өстәргә кирәк түгел, role="dialog"чөнки без аны JavaScript аша өстибез.

YouTube видеоларын урнаштыру

YouTube видеоларын модальләргә урнаштыру Bootstrap'та булмаган өстәмә JavaScript таләп итә, уйнауны автоматик рәвештә туктату һәм башкалар. Күбрәк мәгълүмат алу өчен бу файдалы Stack Overflow постын карагыз .

Ихтимал зурлыклар

Модальләрнең өч өстәмә зурлыгы бар, модификатор класслары аша a .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>

Тулы экран модалы

Тагын бер өстәмә язу - кулланучының күренешен каплаучы модальне ачу варианты, a урнаштырылган модификатор класслары аша .modal-dialog.

Класс Мөмкинлек
.modal-fullscreen Waysәрвакыт
.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

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, модальләр хәзерге вакытта CSS үзгәрүчәннәрен кулланалар .modalһәм .modal-backdropреаль вакыттагы көчәйтү өчен. CSS үзгәрүчәннәре өчен кыйммәтләр Sass аша куела, шуңа күрә Sass көйләү дә ярдәм итә.

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

Сасс үзгәрүләр

$modal-inner-padding:               $spacer;

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

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

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

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

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

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

Loop

Fullаваплы тулы экран модальләре$breakpoints карта һәм цикл аша ясала scss/_modal.scss.

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

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

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

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

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

Куллану

Модаль плагин сезнең яшерен эчтәлекне сорау буенча, мәгълүмат атрибутлары яки 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>

Эштән чыгару

Эштән азат ителү модаль эчендәгеdata төймәдәге атрибут белән түбәндә күрсәтелгәнчә була ала:

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

яки модаль читендәгеdata-bs-target төймәдә түбәндә күрсәтелгәнчә :

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Модальне кире кагуның ике ысулы да хупланган булса да, онытмагыз, модальдән читтән чыгару ARIA Авторлык Практикасы Белешмәлеге диалог (модаль) формасына туры килми . Моны үзегезнең куркыныч астында эшләгез.

JavaScript аша

JavaScriptның бер сызыгы белән модаль ясагыз:

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

Вариантлар

Вариантлар мәгълүмат атрибутлары яки JavaScript аша уза алганлыктан, сез опция исемен куша data-bs-аласыз data-bs-animation="{value}". Вариант исемен мәгълүмат атрибутлары аша үткәндә " camelCase " дан "kebab -case " га үзгәртегез. Мәсәлән, data-bs-custom-class="beautifier"урынына кулланыгыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, data-bs-configалар гади компонент конфигурациясен JSON сызыгы итеп урнаштыра ала. Элемент data-bs-config='{"delay":0, "title":123}'һәм data-bs-title="456"атрибутлар булганда, соңгы titleкыйммәт булачак 456һәм аерым мәгълүмат атрибутлары бирелгән кыйммәтләрне юкка чыгарачак data-bs-config. Моннан тыш, булган мәгълүмат атрибутлары JSON кебек кыйммәтләрне урнаштыра ала data-bs-delay='{"show":0,"hide":150}'.

Исем Тип Килешү Тасвирлау
backdrop буле,'static' true Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, staticбасылганда модальне япмаган фонны күрсәтегез.
focus буле true Башланганда игътибарны модальгә куя.
keyboard буле true Качу ачкычы басылганда модальне япа.

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

Вариантлар

Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Метод Тасвирлау
dispose Элемент модалын җимерә. (DOM элементында сакланган мәгълүматны бетерә)
getInstance DOM элементы белән бәйләнгән модаль инстанцияне алырга мөмкинлек бирүче статик ысул.
getOrCreateInstance Статик ысул, ул DOM элементы белән бәйләнгән модаль инстанцияне алырга, яисә ул башланмаган очракта яңасын булдырырга мөмкинлек бирә.
handleUpdate Әгәр дә модаль биеклеге ачык булганда үзгәрсә (ягъни әйләндерү тактасы барлыкка килгән очракта) модаль позициясен кул белән көйләгез.
hide Модальне кул белән яшерә. Модаль яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.modalвакыйга булганчы).
show Кул белән модаль ачыла. Модаль күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.modalвакыйга булганчы). Шулай ук, сез DOM элементын аргумент буларак модаль вакыйгаларда кабул итә аласыз ( relatedTargetмилек буларак). (ягъни const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modalhidden.bs.modal

Вакыйгалар

Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә. Барлык модаль вакыйгалар да модальнең үзендә (ягъни <div class="modal">).

Вакыйга Тасвирлау
hide.bs.modal hideБу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
hidden.bs.modal Бу вакыйга модаль кулланучыдан яшерелгәннән соң эшләнә (CSS күчү тәмамлануын көтәр).
hidePrevented.bs.modal Бу вакыйга модаль күрсәтелгәндә, аның фоны staticһәм модаль читендә чирттерелгәндә эшләнә. Качу ачкычы басылып, keyboardвариант куелгач , вакыйга шулай ук ​​атыла false.
show.bs.modal showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . Әгәр басу аркасында килеп чыкса, басылган элемент relatedTargetвакыйганың милеге булып тора.
shown.bs.modal Бу вакыйга модаль кулланучыга күренгәндә эшләнә (CSS күчү тәмамлануын көтәр). Әгәр басу аркасында килеп чыкса, басылган элемент relatedTargetвакыйганың милеге булып тора. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})