Модал

Bootstrap-ийн JavaScript модаль залгаасыг ашиглан өөрийн сайтад гэрэл хайрцаг, хэрэглэгчийн мэдэгдэл эсвэл бүрэн захиалгат контентын харилцах цонхыг нэмнэ үү.

Энэ хуудсан дээр

Хэрхэн ажилладаг

Bootstrap-ийн модаль бүрэлдэхүүн хэсэгтэй ажиллахаасаа өмнө манай цэсийн сонголтууд саяхан өөрчлөгдсөн тул дараах зүйлийг уншина уу.

Модаль нь HTML, CSS болон JavaScript-ээр бүтээгдсэн. Тэдгээрийг баримт бичигт байгаа бусад бүх зүйл дээр байрлуулж, <body>оронд нь модаль контент гүйлгэхийн тулд гүйлгэх хэсгийг устгана.
Модал "арын дэвсгэр" дээр дарснаар модаль автоматаар хаагдана.
Bootstrap нь нэг удаад зөвхөн нэг модаль цонхыг дэмждэг. Хэрэглэгчийн туршлага муутай гэж бид үзэж байгаа тул үүрлэсэн модлуудыг дэмждэггүй.
Модаль position: fixedнь заримдаа дүрслэхэд нь бага зэрэг тодорхой болдог. Боломжтой бол бусад элементүүдийн хөндлөнгийн оролцооноос зайлсхийхийн тулд модаль HTML-ээ дээд түвшний байрлалд байрлуул. Та .modalөөр тогтмол элемент дотор оруулах үед асуудалтай тулгарах магадлалтай.
Дахин нэг удаа, учир нь position: fixed, мобайл төхөөрөмж дээр мод ашиглах зарим анхааруулга байна. Дэлгэрэнгүйг манай хөтчийн дэмжлэгийн баримтаас харна уу.
HTML5 өөрийн семантикийг хэрхэн тодорхойлдог тул autofocusHTML атрибут нь 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>

Статик дэвсгэр

Backdrop-г статик горимд тохируулсан үед модаль нь гадна талд дарахад хаагдахгүй. Үүнийг туршиж үзэхийн тулд доорх товчийг дарна уу.

<!-- 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.relatedTargetHTML шинж data-bs-*чанаруудыг ашиглана уу.

Доорх нь HTML болон JavaScript-н жишээг харуулсан шууд demo юм. Дэлгэрэнгүй мэдээллийг модаль үйл явдлын баримт бичгүүдээс уншина уу 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">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 видеог загварт оруулах нь автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд 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>

Сасс

Хувьсагч

$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модальаас гадуур товших үед харуулсан модлуудыг хаах товшилтын талбараар хангах 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>

Модалыг хаах хоёр арга хоёулаа дэмжигддэг боловч гаднаас модальыг хаах нь WAI-ARIA горимын харилцах цонхны загварт тохирохгүй гэдгийг санаарай . Үүнийг эрсдэлд оруулаарай.

JavaScript-ээр дамжуулан

JavaScript-ийн нэг мөр бүхий модаль үүсгэх:

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

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-хавсаргана data-bs-backdrop="".

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
`backdrop`	логик эсвэл мөр`'static'`	`true`	Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй `static`backdrop-ыг зааж өгнө үү.
`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()

getInstance

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...
})