Прескокнете до главната содржина Прескокнете на навигацијата со документи
Check
in English

Модален

Користете го модалниот приклучок за JavaScript на Bootstrap за да додадете дијалози на вашата страница за светлосни кутии, кориснички известувања или целосно приспособена содржина.

На оваа страница

Како работи

Пред да започнете со модалната компонента на 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.relatedTargetи HTML 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>

Променете ја анимацијата

Променливата $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 во модали бара дополнителен 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>

CSS

Променливи

Додадено во v5.2.0

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, модалите сега користат локални 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};

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

Јамка

Респонзивните модали на цел екран се генерираат преку $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. Исто така, го отфрла стандардното однесување на лизгање и генерира a .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 “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете 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.modalили hidden.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...
})