Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Modal

Lightboxes, колдонуучу эскертмелери же толугу менен ыңгайлаштырылган мазмун үчүн сайтыңызга диалогдорду кошуу үчүн Bootstrap'тин JavaScript модалдык плагинин колдонуңуз.

Бул бетте

Бул кантип иштейт

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

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

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Демолорду жана колдонуу көрсөтмөлөрүн окууну улантыңыз.

Мисалдар

Төмөндө статикалык модалдык мисал (анын positionжана displayжокко чыгарылган дегенди билдирет). Камтылган модалдык баш, модалдык дене ( үчүн талап кылынат padding) жана модалдык төмөнкү колонтитул (милдеттүү эмес). Мүмкүн болушунча четке кагуу аракеттери менен модалдык аталыштарды кошууну же башка ачык четке кагуу аракетин көрсөтүүнү суранабыз.

Модалдык аталыш

Модалдык текст бул жерде.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Түз демо

Төмөнкү баскычты чыкылдатуу менен жумушчу модалдык демонстрацияны которуштуруу. Ал ылдый жылып, беттин жогору жагына карай өчүп калат.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Статикалык фон

Көшөгө статикалык абалга коюлганда, анын сыртын басканда модаль жабылбайт. Аны аракет кылуу үчүн төмөнкү баскычты басыңыз.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Узун мазмунду жылдыруу

Модалдар колдонуучунун көрүү портуна же түзмөгүнө өтө узун болуп калганда, алар беттин өзүнөн көз карандысыз сыдырышат. Эмнени айткыбыз келгенин билүү үчүн төмөндөгү демонстрацияны байкап көрүңүз.

Сиз ошондой эле модалдык денени кошуу .modal-dialog-scrollableменен жылдырууга мүмкүндүк берген жылдырылуучу модалды түзө аласыз .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Вертикалдуу борборлоштурулган

Модалды вертикалдуу ортого кошуу .modal-dialog-centeredүчүн ..modal-dialog

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Кеңештер жана поповерлер

Керектүү кеңештер жана поповерлер модальдардын ичинде жайгаштырылышы мүмкүн. Модалдар жабылганда, ичиндеги бардык кеңештер жана поповерлер да автоматтык түрдө өчүрүлөт.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Торду колдонуу

Модалдын ичинде Bootstrap тор системасын .container-fluidколдонуңуз .modal-body. Андан кийин, башка жердегидей кадимки тор системасынын класстарын колдонуңуз.

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

Ар түрдүү модалдык мазмун

Бир аз башкача мазмундагы бир эле модалды иштеткен бир топ баскычтар барбы? Кайсы баскыч басылганына жараша модалдын мазмунун өзгөртүү үчүн event.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Кошумча, сиз on менен модалдык диалогуңуздун сүрөттөмөсүн бере аласыз .modal. Кошуунун кереги жок экенин эске алыңыз, role="dialog"анткени биз аны JavaScript аркылуу кошконбуз.

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

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

Кошумча өлчөмдөр

Модалдардын үч кошумча өлчөмдөрү бар, аларды модификатор класстары аркылуу .modal-dialog. Бул өлчөмдөр кууш көрүнүштөрдөгү горизонталдуу сыдырма тилкелерин болтурбоо үчүн белгилүү бир үзгүлтүккө учуроо чекиттеринде ишке кирет.

Өлчөмү Класс Модалдык максималдуу туурасы
Small .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 өзгөрмөлөр ыкмасынын бир бөлүгү катары, модалдар азыр жергиликтүү 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);

Loop

$breakpointsКарта жана цикл аркылуу жооп берүүчү толук экран модалдарыscss/_modal.scss түзүлөт .

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

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

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

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

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

Колдонуу

Модалдык плагин маалымат атрибуттары же JavaScript аркылуу суроо-талап боюнча жашыруун мазмунуңузду которушат. Ал ошондой эле демейки сыдыруу жүрүм-турумун жокко чыгарат жана .modal-backdropмодалдын сыртында басканда көрсөтүлгөн модальдарды четке кагуу үчүн чыкылдатуу аймагын камсыз кылуу үчүн а жаратат.

Маалымат атрибуттары аркылуу

Которуу

JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-bs-toggle="modal"баскычы сыяктуу контроллердин элементине орнотуңуз .data-bs-target="#foo"href="#foo"

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Иштен чыгаруу

Төмөндө көрсөтүлгөндөй , модаль ичиндегиdata баскычтагы атрибут менен иштен чыгарууга болот:

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

же модалдын сыртындагыdata-bs-target баскычта төмөндө көрсөтүлгөндөй колдонуңуз:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Модалды жокко чыгаруунун эки жолу тең колдоого алынганы менен, модалды сырттан алып салуу ARIA Authoring Practices Guide диалогунун (модалдык) үлгүсүнө дал келбей турганын унутпаңыз . Муну өзүңүздүн тобокелиңиз менен жасаңыз.

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

аты Type Демейки Description
backdrop логикалык,'static' true Модалдык көшөгө элементин камтыйт. Же болбосо, staticбасылганда модалды жаппаган фон үчүн көрсөтүңүз.
focus логикалык true Инициализацияланганда фокусту модалга коет.
keyboard логикалык true Escape баскычы басылганда модалды жабат.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталганда эле, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

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

Өтүү параметрлери

Мазмунуңузду модаль катары иштетет. Кошумча варианттарды кабыл алат object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Метод Description
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">.

Окуя Description
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...
})