Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Modal

Koresha Bootstrap ya JavaScript modal plugin kugirango wongere ibiganiro kurubuga rwawe kumasanduku yumucyo, imenyesha ryabakoresha, cyangwa ibikubiyemo byuzuye.

Kuriyi page

Uburyo ikora

Mbere yo gutangira hamwe na moderi ya Bootstrap, menya neza gusoma ibikurikira nkuko amahitamo yacu aherutse guhinduka.

  • Moderi yubatswe hamwe na HTML, CSS, na JavaScript. Bashyizwe hejuru y'ibindi byose biri mu nyandiko hanyuma bakureho umuzingo <body>kugirango ibintu bya modal bizunguruka aho.
  • Kanda kuri modal "backdrop" izahita ifunga modal.
  • Bootstrap ishyigikira idirishya rimwe gusa icyarimwe. Moderi yatoranijwe ntabwo ishyigikiwe nkuko twemera ko ari uburambe bwabakoresha.
  • Uburyo bukoreshwa position: fixed, bushobora rimwe na rimwe kuba bwihariye kubijyanye no gutanga. Igihe cyose bishoboka, shyira HTML modal yawe murwego rwo hejuru kugirango wirinde kwivanga mubindi bintu. Birashoboka ko uzahura nibibazo mugihe utera .modalikindi kintu gihamye.
  • Ubundi na none, kubera position: fixed, hari caveats hamwe no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.
  • Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, ikiranga autofocusHTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Komeza usome kuri demo nubuyobozi bukoreshwa.

Ingero

Hasi nurugero ruhagazeposition neza (bisobanura ibyarwo kandi displaybyararenze). Harimo imitwe yumutwe, modal umubiri (bisabwa kuri padding), hamwe na moderi yumutwe (bidashoboka). Turasaba ko ushiramo imitwe yuburyo hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa ugatanga ikindi gikorwa cyo kwirukana.

Umutwe w'icyitegererezo

Inyandiko yumubiri isanzwe ijya hano.

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

Kubaho

Kanda kuri moderi ikora yerekana kanda buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Imiterere yinyuma

Iyo backdrop yashizwe kuri static, modal ntizifunga mugihe ukanze hanze yacyo. Kanda buto hepfo kugirango ugerageze.

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

Kuzenguruka ibintu birebire

Iyo moderi iba ndende cyane kubakoresha kureba cyangwa igikoresho, bazunguruka batisunze page ubwayo. Gerageza demo hepfo kugirango urebe icyo dushaka kuvuga.

Urashobora kandi gukora modal izenguruka yemerera kuzenguruka umubiri muburyo .modal-dialog-scrollablewongeyeho .modal-dialog.

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

Hagati

Ongeraho .modal-dialog-centeredkugirango .modal-dialoguhagarike hagati ya modal.

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

Ibikoresho hamwe na popovers

Ibikoresho na popovers birashobora gushirwa muburyo bukenewe. Iyo moderi zifunze, ibikoresho byose hamwe na popovers imbere nabyo birahita birukanwa.

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

Gukoresha gride

Koresha Bootstrap grid sisitemu muburyo bwo guteramo .container-fluidimbere muri .modal-body. Noneho, koresha urwego rusanzwe rwa grid sisitemu nkuko wabishaka ahandi.

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

Guhindura ibintu bitandukanye

Ufite buto ya buto yose itera modal imwe hamwe nibintu bitandukanye? Koresha event.relatedTargetna HTML data-bs-*ibiranga kugirango uhindure ibiri muri modal ukurikije buto yakanze.

Hasi ni demo nzima ikurikirwa nurugero HTML na JavaScript. Kubindi bisobanuro, soma ibyabaye modal docs kugirango ubone ibisobanuro birambuye 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
})

Hinduranya hagati yuburyo

Hinduranya hagati yuburyo bwinshi hamwe nubushishozi bushyize data-bs-targethamwe data-bs-togglenibiranga. Kurugero, urashobora guhinduranya ijambo ryibanga gusubiramo modal uhereye mubimenyetso bimaze gufungura muburyo. Nyamuneka menya uburyo bwinshi budashobora gufungura icyarimwe - ubu buryo burahinduka hagati yuburyo bubiri butandukanye.

Fungura uburyo bwa mbere
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>

Hindura animasiyo

Impinduka $modal-fade-transformigena ihinduka ryimiterere ya .modal-dialogmbere yuburyo bwa fade-in animasiyo, $modal-show-transformimpinduka igena impinduka .modal-dialogkumpera ya modal fade-in animasiyo.

Niba ushaka urugero rwa zoom-in animasiyo, urashobora gushiraho $modal-fade-transform: scale(.8).

Kuraho animasiyo

Kuburyo bugaragara gusa aho guhinduka kugirango turebe, kura urwego muburyo .fadebwawe.

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

Uburebure butangaje

Niba uburebure bwa modal ihinduka mugihe ifunguye, ugomba guhamagara myModal.handleUpdate()kugirango uhindure imyanya yuburyo mugihe umuzingo ugaragara.

Kuboneka

Wemeze kongeraho aria-labelledby="...", werekana umutwe wuburyo, kuri .modal. Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedbyna .modal. Menya ko udakeneye kongeramo role="dialog"kuva tumaze kongeramo binyuze kuri JavaScript.

Gushyira amashusho ya YouTube

Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.

Ingano yubushake

Moderi ifite ubunini butatu butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog. Ingano itangira ahantu runaka kugirango wirinde gutambuka gutambitse kumurongo muto.

Ingano Icyiciro Ubugari bwubugari
Ntoya .modal-sm 300px
Mburabuzi Nta na kimwe 500px
Kinini .modal-lg 800px
Kinini cyane .modal-xl 1140px

Mburabuzi modal idafite icyiciro gihindura icyiciro kigizwe nubunini "buringaniye".

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

Moderi yuzuye

Ikindi kirenzeho ni amahitamo yo kwerekana modal ikubiyemo umukoresha kureba, iboneka binyuze mumasomo ahindura ashyirwa kuri a .modal-dialog.

Icyiciro Kuboneka
.modal-fullscreen Buri gihe
.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

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihindagurika CSS ihinduka, modal ubu ikoresha impinduka za CSS zaho kuri .modalhamwe no .modal-backdropkuzamura igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

  --#{$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};

Ibihinduka bya 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);

Umuzingi

Uburyo bwuzuye bwibisubizo byuzuye byakozwe hakoreshejwe $breakpointsikarita nu muzingo 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;
      }
    }
  }
}

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Irenze kandi imyitwarire idasanzwe yo kuzunguruka kandi itanga a .modal-backdropkugirango itange ahantu ho gukanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Toggle

Kora modal utanditse JavaScript. Shyira data-bs-toggle="modal"ku kintu kigenzura, nka buto, hamwe na a data-bs-target="#foo"cyangwa href="#foo"ugamije uburyo bwihariye bwo guhinduranya.

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

Kwirukana

Kwirukanwa birashobora kugerwaho hamwe na datakiranga kuri buto muri modal nkuko bigaragara hano:

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

cyangwa kuri buto hanze yuburyo ukoresheje data-bs-targetnkuko bigaragara hano:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Mugihe inzira zombi zo kwirukana modal zishyigikiwe, uzirikane ko kwirukana hanze modal bidahuye na ARIA Authoring Practices Guide dialog (modal) . Kora ibi wowe ubwawe.

Binyuze kuri JavaScript

Kora modal hamwe numurongo umwe wa JavaScript:

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

Amahitamo

Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".

Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.

Izina Andika Mburabuzi Ibisobanuro
backdrop boolean,'static' true Harimo modal-backdrop element. Ubundi, vuga statickuri backdrop idafunga modal iyo ukanze.
focus boolean true Shyira intumbero kuri modal iyo itangijwe.
keyboard boolean true Gufunga modal mugihe urufunguzo rwo guhunga rukanda.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Guhitamo inzira

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Uburyo Ibisobanuro
dispose Gusenya ikintu cyuburyo. (Kuraho amakuru yabitswe kubintu bya DOM)
getInstance Uburyo buhagaze butuma ubona urugero rwerekana ibintu bifitanye isano na DOM.
getOrCreateInstance Uburyo buhamye butuma ubona urugero rwuburyo bujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe.
handleUpdate Nintoki uhindure imyanya yuburyo niba uburebure bwa modal ihinduka mugihe ifunguye (nukuvuga mugihe umuzingo ugaragara).
hide Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).
show Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba). Na none, urashobora gutambutsa ikintu cya DOM nkimpaka zishobora kwakirwa mubyabaye ( relatedTargetnkumutungo). (urugero const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

Ibyabaye

Moderi ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa. Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

Icyabaye Ibisobanuro
hide.bs.modal Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
hidden.bs.modal Ibirori birukanwa mugihe modal yarangije guhishwa kubakoresha (izategereza ko inzibacyuho ya CSS irangira).
hidePrevented.bs.modal Ibirori birukanwa iyo modal yerekanwe, inyuma yayo ni staticno gukanda hanze yuburyo bukorwa. Ibirori nabyo birukanwa mugihe urufunguzo rwo guhunga rukanda kandi keyboardamahitamo yashyizweho false.
show.bs.modal Ibirori birasa ako kanya mugihe showurugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye.
shown.bs.modal Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})