Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

I-Modal

Sebenzisa i-plugin ye-modal ye-Bootstrap ye-JavaScript ukwengeza izingxoxo kusayithi lakho ukuze uthole amabhokisi okukhanya, izaziso zabasebenzisi, noma okuqukethwe ngokwezifiso ngokuphelele.

Kuleli khasi

Isebenza kanjani

Ngaphambi kokuthi uqale nge-modal ye-Bootstrap, qiniseka ukuthi ufunda okulandelayo njengoba izinketho zethu zemenyu zisanda kushintsha.

  • Amamodeli akhiwe nge-HTML, CSS, neJavaScript. Abekwe phezu kwayo yonke enye into kudokhumenti futhi asuse ukuskrola kokuthi <body>okuqukethwe kwe-modal kuskrole esikhundleni salokho.
  • Ukuchofoza "okungemuva" kwe-modal kuzovala ngokuzenzakalelayo i-modal.
  • I-Bootstrap isekela kuphela iwindi lemodali eyodwa ngesikhathi. Amamodeli afakwe esidlekeni awasekelwa njengoba sikholelwa ukuthi awamazi kahle abasebenzisi.
  • Amamodali asebenzisa position: fixed, okungenzeka ukuthi ngezinye izikhathi athize mayelana nokunikezwa kwawo. Noma nini lapho kunokwenzeka, beka i-modal yakho ye-HTML endaweni yezinga eliphezulu ukuze ugweme ukuphazamiseka okungaba khona okuvela kwezinye izici. Cishe uzohlangabezana nezinkinga lapho wenza isidleke .modalphakathi kwenye into elungisiwe.
  • Nakulokhu, ngenxa position: fixedye-, kuneminye imixwayiso ngokusebenzisa ama-modal kumadivayisi eselula. Bona amadokhumenti asekela isiphequluli sethu ukuze uthole imininingwane.
  • Ngenxa yokuthi i-HTML5 iyichaza kanjani i-semantics yayo, isibaluli se- autofocusHTML asinawo umthelela kumamodeli we-Bootstrap. Ukuze uthole umphumela ofanayo, sebenzisa i-JavaScript yangokwezifiso:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Qhubeka ufunda amademo nemihlahlandlela yokusebenzisa.

Izibonelo

Ngezansi isibonelo se-modal esimileposition (okusho ukuthi saso futhi displaysikhishiwe). Kufakwe unhlokweni we-modal, umzimba we-modal (uyadingeka padding), kanye nonyaweni we-modal (ongakukhetha). Sicela ukuthi ufake izihloko ze-modal ezinezenzo zokucashisa noma nini lapho kunokwenzeka, noma unikeze esinye isenzo sokuchitha esisobala.

Isihloko se-modal

Umbhalo womzimba we-Modal ungena lapha.

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

Idemo ebukhoma

Guqula idemo yemodi yokusebenza ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

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

Ingemuva elimile

Uma okwasemuva kusethelwe ku-static, i-modal ngeke ivaleke uma uchofozwa ngaphandle kwayo. Chofoza inkinobho engezansi ukuze uyizame.

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

Ukuskrola okuqukethwe okude

Uma amamodeli eba made kakhulu endaweni yokubuka yomsebenzisi noma idivayisi, bayaskrola ngaphandle kwekhasi ngokwalo. Zama idemo engezansi ukuze ubone ukuthi siqonde ukuthini.

Ungakwazi futhi ukudala i-modal enyakaziswayo evumela ukuskrola umzimba we-modal ngokwengeza .modal-dialog-scrollablekokuthi .modal-dialog.

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

Kuphakathi nendawo

Engeza .modal-dialog-centeredukuze .modal-dialogumise phakathi nendawo imodali ngokuqondile.

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

Amathuluzi kanye popover

Izeluleko zamathuluzi kanye ne- popover zingafakwa ngaphakathi kwamamodeli njengoba kudingeka. Uma amamodeli avaliwe, noma yimaphi amathiphu nama-popover ngaphakathi nawo achithwa ngokuzenzakalelayo.

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

Ukusebenzisa igridi

Sebenzisa isistimu yegridi ye-Bootstrap ngaphakathi kwe-modal ngokuzalela .container-fluidngaphakathi kwe- .modal-body. Bese, sebenzisa amakilasi esistimu yegridi evamile njengoba ubungenza kwenye indawo.

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

Ukushintshashintsha kokuqukethwe kwe-modal

Unenqwaba yezinkinobho zonke ezicupha i-modal efanayo ngokuqukethwe okuhluke kancane? Sebenzisa event.relatedTargetkanye nezibaluli ze- HTMLdata-bs-* ukuze uguqule okuqukethwe kwe-modal kuye ngokuthi iyiphi inkinobho echofozwe.

Ngezansi kunedemo ebukhoma elandelwa isibonelo se-HTML ne-JavaScript. Ukuze uthole ulwazi olwengeziwe, funda amadokhumenti emicimbi ye-modal ukuze uthole imininingwane kokuthi 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
})

Guqula phakathi kwamamodeli

Guqula phakathi kwamamodeli amaningi ngokubeka okuthile okuhlakaniphile kwezimpawu data-bs-targetkanye data-bs-togglenezibaluli. Isibonelo, ungaguqula i-modal yokusetha kabusha iphasiwedi ngaphakathi kwe-modal yokungena evele ivuliwe. Sicela wazi ukuthi amamodeli amaningi awakwazi ukuvulwa ngesikhathi esisodwa—le ndlela imane iguqule phakathi kwamamodeli amabili ahlukene.

Vula i-modal yokuqala
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>

Shintsha ukugqwayiza

Okuguquguqukayo $modal-fade-transformkunquma isimo soguquko .modal-dialogsangaphambi kokugqwayiza kwe-modal fade-in, $modal-show-transformokuhlukile kunquma ukuguqulwa .modal-dialogekupheleni kwe-modal fade-in animation.

Uma ufuna ngokwesibonelo i-zoom-in animation, ungasetha $modal-fade-transform: scale(.8).

Susa ukugqwayiza

Kumamodeli avele avele kunokuba afiphele ukuze abukwe, susa .fadeikilasi kumakhaphu akho e-modal.

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

Ukuphakama okunamandla

Uma ukuphakama kwe-modal kushintsha ngenkathi ivuliwe, kufanele ushayele myModal.handleUpdate()ukuze ulungise indawo ye-modal uma kwenzeka kuvela ibha yokuskrola.

Ukufinyeleleka

Qiniseka ukuthi uyengeza aria-labelledby="...", ubhekisela kusihloko se-modal, ku .modal. Ukwengeza, unganikeza incazelo yengxoxo yakho ye-modal nge- aria-describedbyon .modal. Qaphela ukuthi awudingi ukungeza role="dialog"njengoba sesivele sengeze nge-JavaScript.

Ishumeka amavidiyo e-YouTube

Ukushumeka amavidiyo e-YouTube kumamodeli kudinga i-JavaScript eyengeziwe engekho ku-Bootstrap ukuze kumiswe ukudlalwa ngokuzenzakalelayo nokunye. Bona lokhu okuthunyelwe okuchichima kwesitaki okuwusizo ukuze uthole ulwazi olwengeziwe.

Osayizi abazikhethela

Amamodeli anosayizi abathathu abazikhethela, atholakala ngamakilasi okulungisa azobekwa ku- .modal-dialog. Laba bosayizi bangena ezindaweni ezithile zokuphumula ukuze bagweme amabha okuskrola avundlile ezimbobeni zokubuka ezinciphile.

Usayizi Ikilasi I-Modal max-width
Encane .modal-sm 300px
Okuzenzakalelayo Lutho 500px
Okukhulu .modal-lg 800px
Okukhulu kakhulu .modal-xl 1140px

I-modal yethu ezenzakalelayo ngaphandle kwesigaba sokuguqula ihlanganisa usayizi "omaphakathi".

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

I-Modal yesikrini esigcwele

Okunye ukukhipha inketho yokuveza i-modal emboza imbobo yokubuka yomsebenzisi, etholakala ngamakilasi okulungisa abekwe ku- .modal-dialog.

Ikilasi Ukutholakala
.modal-fullscreen Njalo
.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

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, amamodeli manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS .modalkanye nokwenza .modal-backdropngokwezifiso okuthuthukisiwe kwesikhathi sangempela. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

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

Izinguquko ze-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);

Iluphu

Amamodeli esikrini esigcwele aphendulayo akhiqizwa $breakpointsngemephu kanye ne-loop ku- 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;
      }
    }
  }
}

Ukusetshenziswa

I-plugin ye-modal iguqula okuqukethwe kwakho okufihliwe ngokufunwa, ngezibaluli zedatha noma i-JavaScript. Iphinda ikhiphe ukuziphatha kokuskrola okuzenzakalelayo futhi ikhiqize .modal-backdropukuhlinzeka ngendawo yokuchofoza yokucashisa amamodeli abonisiwe lapho uchofozwa ngaphandle kwe-modal.

Ngezibaluli zedatha

Guqula

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-bs-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-bs-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

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

Cashisa

Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho dataengaphakathi kwe-modal njengoba kuboniswe ngezansi:

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

noma enkinobho engaphandle kwe-modal usebenzisa lokhu data-bs-targetokuboniswe ngezansi:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Nakuba zombili izindlela zokucashisa i-modal zisekelwa, khumbula ukuthi ukucashisa ngaphandle kwe-modal akufani nephethini ye- ARIA Authoring Practices Guide dialog (modali) . Yenza lokhu ngokuzifaka wena engozini.

Nge-JavaScript

Dala i-modal ngomugqa owodwa we-JavaScript:

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

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Igama Uhlobo Okuzenzakalelayo Incazelo
backdrop i-boolean,'static' true Kufaka phakathi i-elementi ye-modal-backdrop. Noma, cacisa staticokwasemuva okungavali i-modal uma ichofozwa.
focus boolean true Ibeka ukugxila ku-modal lapho iqaliswa.
keyboard boolean true Ivala i-modal lapho ukhiye we-escape ucindezelwa.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Izinketho zokudlula

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Indlela Incazelo
dispose Destroys an element’s modal. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the modal instance associated with a DOM element.
getOrCreateInstance Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.
handleUpdate Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
hide Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Description
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})