Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
in English

Modal

Çyra gutulary, ulanyjy habarnamalary ýa-da düýbünden ýörite mazmun üçin sahypaňyza gepleşikler goşmak üçin Bootstrap-yň JavaScript modal pluginini ulanyň.

Bu sahypada

Bu nähili işleýär

“Bootstrap” -yň modal komponenti bilen başlamazdan ozal menýu opsiýalarymyzyň üýtgemegi sebäpli aşakdakylary okaň.

  • Modallar HTML, CSS we JavaScript bilen gurulýar. <body>Olar resminamadaky beýleki zatlaryň üstünde ýerleşýärler we modal mazmunyň ýerine aýlanmagy üçin aýlawy aýyrýarlar .
  • Modal “fonda” basylsa, modal awtomatiki usulda ýapylar.
  • Bootstrap bir gezekde diňe bir modal penjiräni goldaýar. Içerki modallar goldanylmaýar, sebäbi ulanyjylaryň pes tejribelerine ynanýarys.
  • Modallar ulanylýar position: fixed, käwagt görkezilişi barada birneme aýratyn bolup biler. Mümkin boldugyça, beýleki elementleriň päsgelçiliklerinden gaça durmak üçin modal HTML-iňizi iň ýokary derejä goýuň. .modalBaşga bir kesgitli elementiň içinde höwürtge döredeniňizde kynçylyklara duçar bolarsyňyz .
  • Mobileene-de bir gezek, position: fixedykjam enjamlarda modal ulanýan käbir gowaklar bar. Jikme-jiklikler üçin brauzer goldaw resminamalarymyza serediň.
  • HTML5 semantikasyny nädip kesgitleýändigi sebäpli, HTML autofocusatributynyň Bootstrap modallarynda täsiri ýok. Şol bir effekt gazanmak üçin käbir JavaScript ulanyň:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Görkezişler we ulanyş görkezmeleri üçin okaň.

Mysallar

Aşakda statiki modal mysal (onuň manysyny aňladýar positionwe displayýokaşdy). Modal sözbaşy, modal korpus (zerur padding) we modal aşaky sözbaşy (islege görä) girýär. Mümkin boldugyça işden aýyrmak hereketleri bilen modal sözbaşylary goşmagyňyzy ýa-da başga bir aç-açan işden aýyrmagyňyzy haýyş edýäris.

Modal ady

Modal beden teksti şu ýere gidýär.

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

Göni görkeziş

Aşakdaky düwmä basyp, işleýän modal demony üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

<!-- 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>

Statik fon

Düşündiriş statiki görnüşde goýlanda, daşyna basylanda modal ýapylmaz. Synag üçin aşakdaky düwmä basyň.

<!-- 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>

Uzyn mazmuny aýlamak

Modallar ulanyjynyň görnüşi ýa-da enjamy üçin gaty uzyn bolanda, sahypanyň özünden garaşsyz aýlanýar. Näme diýjek bolýanymyzy görmek üçin aşakdaky demony synap görüň.

.modal-dialog-scrollableŞeýle hem, modal göwrümi goşmak arkaly aýlamaga mümkinçilik berýän aýlanyp bolýan modal döredip bilersiňiz .modal-dialog.

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

Dik merkezde

Modaly dikligine merkezleşdirmek üçin .modal-dialog-centeredgoşuň ..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>

Gurallar we popovers

Gurallar we popovers zerur bolanda modallaryň içinde ýerleşdirilip bilner. Modallar ýapylanda, içindäki islendik gurallar we açyjylar awtomatiki usulda işden çykarylýar.

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

Paneli ulanmak

Içinde höwürtge döredip, “Bootstrap” grid ulgamyny modalyň içinde .container-fluidulanyň .modal-body. Soň bolsa, beýleki ýerlerde bolşy ýaly adaty set ulgamy sapaklaryny ulanyň.

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

Dürli modal mazmun

Birneme üýtgeşik mazmunly birmeňzeş modaly herekete getirýän bir topar düwme barmy? Haýsy düwmä basylandygyna baglylykda modalyň mazmunyny üýtgetmek üçin HTML event.relatedTargetwe HTML data-bs-*atributlaryny ulanyň .

Aşakda HTML we JavaScript mysallary bilen göni ýaýlymda görkezilýär. Has giňişleýin maglumat üçin jikme-jiklikler üçin modal wakalaryň resminamalaryny okaň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
})

Modallaryň arasynda çalşyň

Birnäçe modalyň data-bs-targetwe data-bs-toggleatributlaryň akylly ýerleşdirilmegi bilen çalşyň. Mysal üçin, modalda eýýäm açyk belginiň içinden paroly täzeden düzmek modalyny üýtgedip bilersiňiz. Bir wagtyň özünde birnäçe modalyň açyk bolup bilmejekdigine üns bermegiňizi haýyş edýäris - bu usul diňe iki aýry modalyň arasynda üýtgeýär.

Ilkinji modaly açyň
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>

Animasiýany üýtgediň

$modal-fade-transformÜýtgeýji, modal ýitip barýan animasiýadan ozal üýtgeýän ýagdaýy kesgitleýär, üýtgeýji .modal-dialogmodal öçürilen animasiýanyň soňundaky $modal-show-transformüýtgemäni kesgitleýär ..modal-dialog

Mysal üçin ulaltmak animasiýasyny isleseňiz, sazlap bilersiňiz $modal-fade-transform: scale(.8).

Animasiýany aýyryň

Görmek üçin ýitip gitmän, ýönekeý görünýän modallar üçin .fadesynpy modal belligiňizden aýyryň.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dinamiki belentlikler

Modalyň beýikligi açyk wagty üýtgese, myModal.handleUpdate()aýlaw paneli peýda bolan ýagdaýynda modalyň ýagdaýyny sazlamak üçin jaň etmeli.

Elýeterlilik

aria-labelledby="..."Modal adyna salgylanyp, goşuň .modal. Mundan başga-da, modal gepleşikleriňiziň düşündirişini berip aria-describedbybilersiňiz .modal. Goşmaly däldigiňize üns beriň, role="dialog"sebäbi eýýäm JavaScript arkaly goşýarys.

YouTube wideolaryny ýerleşdirmek

YouTube wideolaryny modallara ornaşdyrmak, Bootstrap-da däl, goşmaça JavaScript-i oýnamagy we başga-da köp zady talap edýär. Has giňişleýin maglumat üçin bu peýdaly “Stack overflow” ýazgysyna serediň .

Meýletin ululyklar

Modallarda üç sany goşmaça ululyk bar, a-da goýuljak üýtgediji synplar arkaly .modal-dialog. Bu ululyklar dar görnüşdäki gorizontal aýlaw panellerinden gaça durmak üçin belli bir nokatlara girýär.

Ölçegi Synp Modal maksimum giňlik
Kiçi .modal-sm 300px
Bellenen Hiç 500px
Uly .modal-lg 800px
Goşmaça uly .modal-xl 1140px

Üýtgediji synpsyz deslapky modalymyz “orta” ululyk modalyny düzýär.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Doly ekran modaly

Anotherene bir artykmaçlyk, a-da ýerleşdirilen üýtgediji synplar arkaly elýeterli ulanyjynyň görünişini öz içine alýan modaly açmak .modal-dialog.

Synp Elýeterlilik
.modal-fullscreen Elmydama
.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

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, modallar häzirki wagtda ýerli CSS üýtgeýjilerini ulanýarlar .modalwe .modal-backdrophakyky wagtda özleşdirmek üçin. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

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

Aýlaw

Jogapkärçilikli doly ekran modallary$breakpoints karta we aýlaw arkaly döredilýär 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;
      }
    }
  }
}

Ulanylyşy

Modal plugin, gizlin mazmunyňyzy maglumat atributlary ýa-da JavaScript arkaly islege görä üýtgedýär. Şeýle hem, deslapky aýlanyş häsiýetini ýok edýär we .modal-backdropmodalyň daşyna basanyňyzda görkezilen modallary ýatyrmak üçin basmak meýdançasyny döredýär.

Maglumat atributlary arkaly

Toggle

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-bs-toggle="modal"elementi, düwme ýaly, data-bs-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

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

Işden aýyrmak

Aşakda görkezilişi ýaly modalyň içindäki düwmedäkidata atribut bilen işden aýrylyp bilner :

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

ýa-da aşakda görkezilişi ýaly modalyň daşyndaky düwmede :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Modaly işden aýyrmagyň iki usuly hem goldanýan bolsa-da, modalyň daşyndan işden çykarmagyň ARIA Awtorlaşdyryş amallary gollanmasy gepleşik (modal) görnüşine laýyk gelmeýändigini ýadyňyzdan çykarmaň . Muny öz töwekgelçiligiňiz bilen ediň.

JavaScript arkaly

JavaScript-iň bir setiri bilen modal dörediň:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady Görnüşi Bellenen Düşündiriş
backdrop boolean,'static' true Modal-fon elementini öz içine alýar. staticAtivea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
focus boolean true Başlanylanda ünsi modala gönükdirýär.
keyboard boolean true Gaçmak düwmesi basylanda modaly ýapýar.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Geçiş opsiýalary

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Usul Düşündiriş
dispose Bir elementiň modalyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
getInstance DOM elementi bilen baglanyşykly modal mysaly almaga mümkinçilik berýän statiki usul.
getOrCreateInstance DOM elementi bilen baglanyşykly modal mysaly almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.
handleUpdate Modalyň beýikligi açyk wagty üýtgese (meselem, aýlaw paneli peýda bolan ýagdaýynda) modalyň ýagdaýyny el bilen düzüň.
hide Modaly el bilen gizleýär. Modal aslynda gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär .hidden.bs.modal
show Modal bilen el bilen açýar. Modal görkezilmänkä (ýagny shown.bs.modalwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. relatedTargetŞeýle hem, modal hadysalarda ( emläk hökmünde) kabul edilip bilinjek argument hökmünde DOM elementini geçirip bilersiňiz . const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)( ýagny
toggle Modal bilen el bilen çalşyň. Modal hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.modalýa-da hidden.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär. Modhli modal wakalar modalyň özünde (ýagny <div class="modal">).

Waka Düşündiriş
hide.bs.modal Bu waka hidemysal usuly çagyrylanda derrew atylýar.
hidden.bs.modal Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (CSS geçişleriniň tamamlanmagyna garaşýar).
hidePrevented.bs.modal Bu waka modal görkezilende, onuň fonunda staticwe modalyň daşyna bir gezek basylanda ýerine ýetirilýär. keyboardGaçmak düwmesi basylanda we opsiýa düzülende waka hem atylýar false.
show.bs.modal showBu waka mysal usuly çagyrylanda derrew ýanýar . Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir.
shown.bs.modal Bu waka modal ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})