Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Модаль

Жарық жәшіктері, пайдаланушы хабарландырулары немесе толығымен реттелетін мазмұн үшін сайтыңызға диалогтар қосу үшін Bootstrap JavaScript модальды плагинін пайдаланыңыз.

Бұл бетте

Бұл қалай жұмыс істейді

Bootstrap модальды құрамдас бөлігімен жұмысты бастамас бұрын, мәзір опциялары жақында өзгергендіктен, төмендегіні оқып шығыңыз.

  • Модальдер HTML, CSS және JavaScript көмегімен жасалған. Олар құжаттағы барлық басқа нәрселердің үстіне орналастырылады және оның <body>орнына модальды мазмұн айналдыру үшін айналдыруды алып тастайды.
  • Модальды «фон» түймесін басу модальды автоматты түрде жабады.
  • Bootstrap бір уақытта тек бір модальды терезені қолдайды. Кірістірілген модальдарға қолдау көрсетілмейді, өйткені олар нашар пайдаланушы тәжірибесі деп есептейміз.
  • Модальдар position: fixedкейде оны көрсетуге қатысты ерекше болуы мүмкін дегенді пайдаланады. Мүмкіндігінше, басқа элементтердің ықтимал кедергілерін болдырмау үшін модальды HTML-ді жоғарғы деңгейге қойыңыз. .modalБасқа бекітілген элементке кірістіру кезінде мәселелерге тап болуыңыз мүмкін .
  • Мобильді құрылғыларда модальдарды пайдалану кезінде тағы position: fixedда бірнеше ескертулер бар. Толық ақпаратты шолғышты қолдау құжаттарын қараңыз.
  • HTML5 өзінің семантикасын қалай анықтайтынына байланысты HTML autofocusтөлсипаты 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-describedbyon арқылы бере аласыз .modal. role="dialog"Біз оны JavaScript арқылы қосып қойғандықтан , қосудың қажеті жоқ екенін ескеріңіз .

YouTube бейнелерін ендіру

YouTube бейнелерін модальдарға ендіру үшін ойнатуды автоматты түрде тоқтату және т.б. үшін Bootstrap қолданбасында емес қосымша JavaScript қажет. Қосымша ақпарат алу үшін осы пайдалы 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 нұсқасына қосылды

Bootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бөлігі ретінде модальдар енді нақты уақыттағы жақсартылған теңшеу үшін .modalжергілікті CSS айнымалыларын пайдаланады . .modal-backdropCSS айнымалыларының мәндері 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 арқылы жасырын мазмұнды ауыстырады. Ол сондай-ақ әдепкі айналдыру әрекетін қайта анықтайды және .modal-backdropмодальдан тыс басқанда көрсетілген модальдарды қабылдамау үшін басу аймағын қамтамасыз ету үшін a жасайды.

Деректер атрибуттары арқылы

Ауыстыру

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 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте 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 Escape пернесі басылғанда модальды жабады.

Әдістері

Асинхронды әдістер мен ауысулар

Барлық 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және модальдан тыс шерту орындалғанда іске қосылады. Оқиға сонымен қатар escape пернесі басылғанда және 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...
})