Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Modal

Kozesa Bootstrap's JavaScript modal plugin okwongera dialogs ku mukutu gwo okufuna lightboxes, okumanyisibwa abakozesa, oba ebirimu custom ddala.

Ku muko guno

Engeri gye kikola

Nga tonnatandika na Bootstrap's modal component, kakasa nti osoma bino wammanga kuba menu options zaffe zakyuka gye buvuddeko.

  • Modals zizimbibwa ne HTML, CSS, ne JavaScript. Ziteekebwa ku buli kimu ekirala mu kiwandiiko ne ziggyawo okuzingulula okuva ku <body>olwo ebirimu bya modal ne biyiringisibwa mu kifo ky’ekyo.
  • Okunyiga ku modal “backdrop” kijja kuggalawo modal mu ngeri ey’otoma.
  • Bootstrap ewagira eddirisa lya modal limu lyokka omulundi gumu. Nested modals teziwagirwa nga bwe tukkiriza nti zibeera poor user experiences.
  • Modals use position: fixed, oluusi eyinza okuba eyenjawulo katono ku rendering yaayo. Buli lwe kiba kisoboka, teeka HTML yo eya modal mu kifo eky’omutendera ogw’oku ntikko okwewala okutaataaganyizibwa okuyinza okuva mu bintu ebirala. Ojja kusanga ensonga nga okola nesting a .modalmunda mu element endala ennywevu.
  • Nate, olw’oku position: fixed, waliwo okulabula okumu n’okukozesa modals ku byuma ebikozesebwa ku ssimu. Laba ebiwandiiko byaffe ebiwagira browser okumanya ebisingawo.
  • Olw’engeri HTML5 gy’ennyonnyolamu amakulu gaayo, ekintu kya autofocusHTML tekirina kye kikola mu Bootstrap modals. Okusobola okutuuka ku nkola y’emu, kozesa JavaScript ezimu ez’enjawulo:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Sigala ng’osoma okulaba ebifaananyi n’ebiragiro ebikwata ku nkozesa.

Eby’okulabirako

Wansi waliwo ekyokulabirako kya static modal (ekitegeeza its positionand displayhave been overridden). Mulimu omutwe gwa modal, omubiri gwa modal (ogwetaagisa ku padding), n’omutwe gwa modal (ogw’okwesalirawo). Tusaba okussaamu emitwe gya modal n'ebikolwa eby'okugoba buli lwe kiba kisoboka, oba okuwa ekikolwa ekirala eky'okugoba eky'olwatu.

Omutwe gwa Modal

Modal body text egenda wano.

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

Live demo

Toggle a working modal demo nga onyiga button wansi. Kijja kuseeyeeya wansi era kizike okuva waggulu ku lupapula.

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

Ekifo ekitali kikyukakyuka (static backdrop).

Backdrop bweteekebwa ku static, modal tejja kuggalawo nga onyiga ebweru waayo. Nywa ku bbaatuuni eri wansi okugezaako.

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

Okuyiringisiza ebirimu ebiwanvu

Modal bwe zifuuka empanvu ennyo ku viewport oba ekyuma ky'omukozesa, zitambula nga tezikwatagana na lupapula lwennyini. Gezaako demo wansi olabe kye tutegeeza.

Osobola n'okukola modal egenda okutambula esobozesa okutambula omubiri gwa modal ng'ogattako .modal-dialog-scrollableku .modal-dialog.

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

Nga eri wakati mu nneekulungirivu

Okwongerako .modal-dialog-centeredku .modal-dialogokutuuka mu vertikal wakati 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>

Ebikozesebwa ne popovers

Tooltips ne popovers bisobola okuteekebwa mu modals nga bwekyetaagisa. Modals bweziggalwa, tootips zonna ez’ebikozesebwa ne popovers eziri munda nazo zigobwa mu ngeri ey’otoma.

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

Nga okozesa ekipande ekiyitibwa grid

Kozesa enkola ya Bootstrap grid munda mu modal nga okola ebisu .container-fluidmunda mu .modal-body. Olwo, kozesa ebika by’enkola ya grid eya bulijjo nga bwe wandikoze awalala wonna.

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

Ebirimu eby’enjawulo (modal content).

Olina ekibinja kya buttons nga zonna zisitula modal emu nga zirina ebirimu eby'enjawulo katono? Kozesa event.relatedTargetne HTML data-bs-*attributes okukyusakyusa ebirimu mu modal okusinziira ku button ki eyanyigibwa.

Wansi waliwo live demo nga egobererwa ekyokulabirako HTML ne JavaScript. Okumanya ebisingawo, soma modal events docs okumanya ebisingawo ku 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
})

Toggle wakati wa modals

Toggle wakati wa modals eziwera n'okuteeka okumu okw'amagezi okwa data-bs-targetne data-bs-toggleattributes. Okugeza, oyinza okukyusakyusa modal y’okuzzaawo ekigambo ky’okuyingira okuva munda mu kabonero akaggule edda mu modal. Nsaba omanye nti modali eziwera teziyinza kuggulwawo mu kiseera kye kimu —enkola eno emala kukyusakyusa wakati wa modali bbiri ez’enjawulo.

Ggulawo modal esooka
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>

Kyuusa ebifaananyi ebirina obulamu

Enkyukakyuka $modal-fade-transformesalawo embeera y’enkyukakyuka ya .modal-dialognga tebannaba kukola modal fade-in animation, $modal-show-transformenkyukakyuka esalawo enkyukakyuka ya .modal-dialogku nkomerero ya modal fade-in animation.

Bw’oba ​​oyagala okugeza ekifaananyi eky’okugaziya, osobola okuteekawo $modal-fade-transform: scale(.8).

Ggyawo ebifaananyi ebirina obulamu

Ku modals ezimala okulabika okusinga okuzikira mu okulaba, ggyawo .fadeekibiina okuva ku modal markup yo.

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

Obugulumivu obw’amaanyi

Singa obugulumivu bwa modal bukyuka nga kiggule, olina okuyita myModal.handleUpdate()okuddamu okutereeza ekifo kya modal singa wabaawo scrollbar okulabika.

Okutuuka ku bantu

Kakasa nti oyongerako aria-labelledby="...", ng’ojuliza omutwe gwa modal, ku .modal. Okugatta ku ekyo, oyinza okuwa ennyonyola ku mboozi yo eya modal ne aria-describedbyon .modal. Weetegereze nti teweetaaga kwongerako role="dialog"okuva lwe twayongerako dda nga tuyita mu JavaScript.

Okuyingiza obutambi bwa YouTube

Okuteeka obutambi bwa YouTube mu modals kyetaagisa JavaScript endala etali mu Bootstrap okuyimiriza otomatiki okuzannya n’ebirala. Laba kino ekiyamba Stack Overflow post okumanya ebisingawo.

Sayizi ez’okwesalirawo

Modals zirina sayizi ssatu ez’okwesalirawo, ezifunibwa okuyita mu kiraasi za modifier okuteekebwa ku .modal-dialog. Sayizi zino ziyingira mu bifo ebimu eby’okumenya okwewala okutambula okw’okwebungulula ku bifo ebifunda eby’okulaba.

Obunene Essomo Modal max-obugazi
Tono .modal-sm 300px
Okukosamu Tewali 500px
Gazi .modal-lg 800px
Ebinene ennyo .modal-xl 1140px

Modal yaffe eya bulijjo awatali modifier class ekola “medium” size modal.

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

Modal ya Fullscreen

Ekirala ekiziyiza kwe kulonda okuvaayo modal ekwata ku viewport y'omukozesa, efunibwa okuyita mu modifier classes eziteekebwa ku a .modal-dialog.

Essomo Okubeerawo
.modal-fullscreen Buli kaseera
.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

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, modals kati zikozesa enkyukakyuka za CSS ez’omu kitundu ku .modalera .modal-backdropolw’okulongoosa okw’ekiseera ekituufu okulongooseddwa. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Enkyukakyuka za 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);

Kyabulijo

Responsive fullscreen modals zikolebwa nga ziyita ku $breakpointsmaapu ne loopu mu 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;
      }
    }
  }
}

Enkozesa

Modal plugin ekyusa ebirimu byo ebikwekebwa nga bwe kyetaagisa, okuyita mu data attributes oba JavaScript. Era ekyusa enneeyisa y’okutambula esookerwako era ekola a .modal-backdropokuwa ekifo ky’okunyiga okugoba modals eziragiddwa nga onyiga ebweru wa modal.

Okuyita mu bikwata ku data

Okukyusakyusa

Kozesa modal nga towandiise JavaScript. Teeka data-bs-toggle="modal"ku elementi y'ekifuga, nga button, wamu ne a data-bs-target="#foo"oba href="#foo"okutunuulira modal eyeetongodde okukyusakyusa.

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

Okusiibula

Okugobwa kuyinza okutuukirira n'ekintu ekiri dataku bbaatuuni munda mu modal nga bwe kiragibwa wansi:

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

oba ku button ebweru wa modal nga okozesa data-bs-targetnga bwekiragibwa wansi:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Wadde ng’engeri zombi ez’okugoba modal ziwagirwa, kimanye nti okugoba okuva ebweru wa modal tekukwatagana na ARIA Authoring Practices Guide dialog (modal) pattern . Kino kikole ku bulabe bwo.

Okuyita mu JavaScript

Tonda modal nga olina layini emu eya JavaScript:

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

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Erinnya Okuwandiika Okukosamu Okunnyonnyola
backdrop boolean, .'static' true Mulimu ekintu ekiyitibwa modal-backdrop element. Ekirala, lambika staticku backdrop etaggalawo modal nga enyigiddwa.
focus boolean true Essira liteeka ku modal nga etandise.
keyboard boolean true Eggalawo modal nga escape key enyigiddwa.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Okuyisa eby’okulonda

Ekola ebirimu byo nga modal. Akkiriza eby'okulonda eby'okwesalirawo object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Engeri Okunnyonnyola
dispose Esaanyaawo modal ya elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)
getInstance Enkola ya static ekusobozesa okufuna modal instance ekwatagana ne DOM element.
getOrCreateInstance Enkola ya static ekusobozesa okufuna modal instance ekwatagana ne DOM element, oba okukola empya mu mbeera nga teyali etandikibwawo.
handleUpdate Ddamu mu ngalo ekifo kya modal singa obugulumivu bwa modal bukyuka nga kiggule (kwe kugamba mu mbeera nga scrollbar elabika).
hide Mu ngalo akweka modal. Edda eri oyo akubira nga modal tennakwekebwa ddala (kwe kugamba nga hidden.bs.modalekintu tekinnabaawo).
show Mu ngalo aggulawo modal. Edda eri omuyita nga modal tennalagibwa ddala (kwe kugamba nga shown.bs.modalekintu tekinnabaawo). Era, osobola okuyisa ekintu kya DOM nga ensonga eyinza okufunibwa mu bibaawo mu modal (nga relatedTargeteky’obugagga). (kwe kugamba const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Mu ngalo ekyusakyusa modal. Edda eri oyo ayita nga modal tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.modaloba hidden.bs.modalekintu tekinnabaawo).

Ebibaddewo

Bootstrap's modal class eraga ebitonotono ebibaawo olw'okuyunga mu nkola ya modal. Ebintu byonna ebibaawo mu modal bikubwa ku modal yennyini (kwe kugamba ku <div class="modal">).

Omukolo Okunnyonnyola
hide.bs.modal Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
hidden.bs.modal Ekintu kino kikubwa nga modal emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
hidePrevented.bs.modal Ekintu kino kikubwa nga modal eragiddwa, backdrop yaayo eri staticera okunyiga ebweru wa modal kukolebwa. Ekintu era kikubwa nga ekisumuluzo ky'okutoloka kinywezeddwa era keyboardeky'okulonda ne kiteekebwa ku false.
show.bs.modal Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa. Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTargetekibaddewo.
shown.bs.modal Ekintu kino kikubwa nga modal ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTargetekibaddewo. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})