Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
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>

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

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчдад хандах хандлагын нэг хэсэг болгон модлууд одоо бодит цагийн сайжруулсан тохиргоонд локал CSS хувьсагчдыг .modalашигладаг . .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 Modal-backdrop элементийг агуулдаг. Эсвэл staticтовших үед модыг хаадаггүй backdrop-ыг зааж өгнө үү.
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...
})