Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Modal

Sebelisa mokhoa oa ho kenya JavaScript oa Bootstrap ho kenya lipuisano sebakeng sa hau sa marang-rang bakeng sa mabokose a khanyang, litsebiso tsa basebelisi, kapa litaba tse ikhethileng ka botlalo.

Leqepheng lena

Kamoo e sebetsang kateng

Pele o qala ka karolo ea modal ea Bootstrap, etsa bonnete ba hore u bala tse latelang kaha likhetho tsa rona tsa menyetla li sa tsoa fetoha.

  • Li-modal li hahiloe ka HTML, CSS, le JavaScript. Li behiloe holim'a ntho e 'ngoe le e' ngoe e ka har'a tokomane 'me li tlose moqolo ho tsoa ho <body>e le hore litaba tsa modal li tsamaee.
  • Ho tobetsa "backdrop" ea modal ho tla koala modal ka bo eona.
  • Bootstrap e tšehetsa fensetere e le 'ngoe feela ka nako. Mekhoa e hlophisitsoeng ha e tšehetsoe kaha re lumela hore ha e na boiphihlelo ba basebelisi.
  • Li-modals li sebelisa position: fixed, tseo ka linako tse ling li ka bang tse khethehileng mabapi le phetolelo ea eona. Nako le nako ha ho khonahala, beha HTML ea hau ea modal sebakeng sa boemo bo holimo ho qoba tšitiso e ka bang teng ho tsoa linthong tse ling. U ka 'na ua tobana le mathata ha u theha sehlaha ka .modalhar'a ntho e' ngoe e tsitsitseng.
  • Hape, ka lebaka la position: fixed, ho na le li-caveats mabapi le ho sebelisa mekhoa ea lisebelisoa tsa mehala. Sheba litokomane tsa rona tsa tšehetso ea sebatli ho fumana lintlha.
  • Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, tšobotsi ea autofocusHTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Tsoela pele ho bala bakeng sa li-demos le litataiso tsa tšebeliso.

Mehlala

Ka tlase ke mohlala o tsitsitseng oa modal (o bolelang hore o na positionle 'me displayo tlositsoe). Ho kenyelelitsoe hlooho ea modal, 'mele oa modal (ea hlokehang bakeng sa padding) le botlaaseng ba modal (boikhethelo). Re kopa hore o kenyeletse lihlooho tsa modal le liketso tsa ho qhala ha ho khonahala, kapa o fane ka ketso e 'ngoe e hlakileng ea ho qhala.

Sehlooho sa Modal

Sengoloa sa 'mele oa Modal se fihla mona.

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

Pontšo e phelang

Fetolela mokhoa oa ho sebetsa oa modal ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.

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

Boemo bo tsitsitseng

Ha bokamorao bo behiloe ho static, modal e ke ke ea koaloa ha u tobetse ka ntle ho eona. Tobetsa konopo e ka tlase ho e leka.

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

Ho tsamaisa litaba tse telele

Ha li-modal li nka nako e telele bakeng sa sebaka sa pono sa mosebelisi kapa sesebelisoa, li tsamaea ntle le leqephe ka bolona. Leka demo e ka tlase ho bona seo re se bolelang.

U ka boela ua etsa modal e phutholohang e lumellang ho tsamaisa 'mele oa modal ka ho eketsa .modal-dialog-scrollableho .modal-dialog.

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

E tsepamisitsoe holimo

Eketsa .modal-dialog-centeredho .modal-dialogmodal ho thea bohareng.

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

Lisebelisoa le li-popovers

Lisebelisoa le li-popovers li ka kenngoa ka har'a mekhoa e hlokahalang. Ha li-modal li koetsoe, lisebelisoa life kapa life tsa popover tse ka hare le tsona li qheleloa ka thoko.

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

Ho sebelisa grid

Sebelisa sistimi ea grid ea Bootstrap ka har'a modal ka ho haha .container-fluid​​​​ka har'a .modal-body. Ebe u sebelisa litlelase tse tloaelehileng tsa grid joalo ka ha u ne u ka etsa kae kapa kae.

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

Likahare tse fapaneng tsa modal

Na u na le sehlopha sa likonopo tse hlahisang modal e tšoanang ka litaba tse fapaneng hanyane? Sebelisa event.relatedTargetle litšoaneleho tsa HTMLdata-bs-* ho fetola litaba tsa modal ho latela hore na konopo e tobetse.

Ka tlase ke demo e phelang e lateloang ke mohlala oa HTML le JavaScript. Ho fumana lintlha tse ling, bala litokomane tsa liketsahalo tsa modal bakeng sa lintlha tse mabapi le 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
})

Fetolela pakeng tsa mekhoa

Fetolela lipakeng tsa mekhoa e mengata ka mokhoa o itseng o bohlale oa ho beha data-bs-targetle data-bs-togglelitšobotsi. Ka mohlala, u ka khona ho fetola mokhoa oa ho seta phasewete ho tsoa ka har'a lets'oao le seng le ntse le bulehile. Ka kopo hlokomela hore mekhoa e mengata e ke ke ea buloa ka nako e le 'ngoe - mokhoa ona o fetoha feela pakeng tsa mekhoa e 'meli e arohaneng.

Bula mokhoa oa pele
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>

Fetola animation

Phetoho $modal-fade-transforme etsa qeto ea boemo ba .modal-dialogpele ho animation ea modal fade-in, phetoho $modal-show-transforme etsa qeto ea phetoho .modal-dialogqetellong ea modal fade-in animation.

Haeba u batla mohlala animation ea katametso, u ka seta $modal-fade-transform: scale(.8).

Tlosa animation

Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fadesehlopha ho li-modal markup tsa hau.

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

Bophahamo bo matla

Haeba bophahamo ba modal bo fetoha ha e ntse e butsoe, o lokela ho letsetsa myModal.handleUpdate()ho lokisa boemo ba modal haeba ho hlaha scrollbar.

Ho fihlella

Etsa bonnete ba ho eketsa aria-labelledby="...", ho supa sehlooho sa modal, ho .modal. Ho feta moo, o ka fana ka tlhaloso ea puisano ea hau ea modal le aria-describedbyon .modal. Hlokomela hore ha ho hlokahale hore u kenye role="dialog"kaha re se re e kentse ka JavaScript.

Ho kenyelletsa livideo tsa YouTube

Ho kenya livideo tsa YouTube ho li-modal ho hloka JavaScript e eketsehileng eseng ho Bootstrap ho emisa ho bapala le tse ling. Sheba poso ena e thusang ea Stack Overflow bakeng sa lintlha tse ling.

Boikhethelo ba boholo

Li-modal li na le mefuta e meraro ea boikhethelo, e fumanehang ka litlelase tsa ho fetola tse tla behoa ho .modal-dialog. Lisaese tsena li kenella ka linako tse ling ho qoba mekoallo e tšekaletseng maema-kepeng a manyane.

Boholo Sehlopha Modal max-width
Nyenyane .modal-sm 300px
Ea kamehla Ha ho letho 500px
E kholoanyane .modal-lg 800px
E kholo ho feta .modal-xl 1140px

Modal ea rona ea kamehla ntle le sehlopha sa mofetoleli e etsa "bohareng" ba boholo.

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

Modal skrineng se felletseng

Ntho e 'ngoe e fetelletseng ke khetho ea ho hlahisa modal e koahelang pono ea mosebelisi, e fumanehang ka litlelase tsa modifier tse behiloeng ho .modal-dialog.

Sehlopha Ho fumaneha
.modal-fullscreen Kamehla
.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

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, mekhoa ea mekhoa hona joale e sebelisa mefuta-futa ea CSS ea sebakeng seo .modalle .modal-backdropho ntlafatsa mokhoa oa sebele oa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

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

Mefuta e fapaneng ea Sass

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Mekhoa e arabelang ea skrineng e felletseng e hlahisoa ka ' $breakpointsmapa le loop ho 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;
      }
    }
  }
}

Tšebeliso

Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e fetisa mekhoa ea ho phenya ka mokhoa o tloaelehileng 'me e hlahisa sebaka sa .modal-backdropho tobetsa bakeng sa ho tlosa mekhoa e bontšitsoeng ha u tobetsa ka ntle ho modal.

Ka litšobotsi tsa data

Fetolela

Kenya modal ntle le ho ngola JavaScript. Beha data-bs-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-bs-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.

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

Hlakola

Ho lelekoa ho ka finyelloa ka datatšobotsi ea konopo ka har'a modal joalokaha ho bontšitsoe ka tlase:

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

kapa ka konopo e ka ntle ho modal u sebelisa se data-bs-targetbontšitsoeng ka tlase:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Le hoja mekhoa e 'meli ea ho tlosa modal e tšehetsoa, ​​hopola hore ho leleka ka ntle ho modal ha ho lumellane le mokhoa oa ARIA Authoring Practices Guide (modal) mohlala . Etsa sena ka ho ipeha kotsing.

Ka JavaScript

Theha modal ka mola o le mong oa JavaScript:

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

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ​​ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Lebitso Mofuta Ea kamehla Tlhaloso
backdrop boolean,'static' true E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa staticsebopeho se sa koaleheng ha u tobetse.
focus boolean true E tsepamisa maikutlo ho modal ha e qala.
keyboard boolean true E koala modal ha konopo ea escape e tobetsoa.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

Likhetho tse fetang

E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Mokhoa Tlhaloso
dispose E senya modal oa element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
getInstance Mokhoa o tsitsitseng o u lumellang ho fumana mohlala oa modal o amanang le ntho ea DOM.
getOrCreateInstance Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa modal o amanang le element ea DOM, kapa u thehe e ncha haeba e sa qalisoa.
handleUpdate Ka bouena fetola boemo ba modal haeba bophahamo ba modal bo fetoha ha e ntse e butse (ke hore haeba ho hlaha scrollbar).
hide E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modalketsahalo e etsahala).
show E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modalketsahalo e etsahala). Hape, o ka fetisa karolo ea DOM joalo ka khang e ka amoheloang liketsahalong tsa modal (e le relatedTargetthepa). (ke hore const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modalkapa hidden.bs.modalketsahalo e etsahala).

Liketsahalo

Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal. Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">).

Ketsahalo Tlhaloso
hide.bs.modal Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
hidden.bs.modal Ketsahalo ena e ts'oaroa ha modal e qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
hidePrevented.bs.modal Ketsahalo ena e ts'oaroa ha modal e bonts'oa, bokamorao ba eona staticle ho tobetsa ka ntle ho modal ho etsoa. Ketsahalo e boetse e ts'oaroa ha senotlolo sa ho phonyoha se tobetsoa 'me keyboardkhetho e behiloe ho false.
show.bs.modal Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa. Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo.
shown.bs.modal Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})