Modal

Siv Bootstrap's JavaScript modal plugin ntxiv dialogs rau koj qhov chaw rau lightboxes, neeg siv cov ntawv ceeb toom, lossis cov ntsiab lus kev cai tag nrho.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Ua ntej pib nrog Bootstrap's modal tivthaiv, nco ntsoov nyeem cov hauv qab no raws li peb cov kev xaiv zaub mov tsis ntev los no tau hloov.

Modals yog tsim nrog HTML, CSS, thiab JavaScript. Lawv nyob nraum positioned tshaj txhua yam nyob rau hauv cov ntaub ntawv thiab tshem tawm scroll los ntawm lub <body>thiaj li hais tias modal cov ntsiab lus scrolls hloov.
Nyem rau ntawm lub modal "backdrop" yuav cia li kaw lub modal.
Bootstrap tsuas txhawb ib lub qhov rais modal ib zaug. Nested modals tsis txaus siab vim peb ntseeg tias lawv yog cov neeg siv tsis zoo.
Modals siv position: fixed, uas qee zaum tuaj yeem yog qhov tshwj xeeb ntawm nws qhov kev ua haujlwm. Thaum twg ua tau, tso koj cov HTML modal rau hauv qhov chaw sab saum toj kom tsis txhob muaj kev cuam tshuam los ntawm lwm cov ntsiab lus. Koj yuav muaj peev xwm khiav mus rau hauv cov teeb meem thaum nesting ib .modalnyob rau hauv lwm yam khoom ruaj.
Ib zaug ntxiv, vim position: fixed, muaj qee qhov caveats nrog kev siv modals ntawm mobile pab kiag li lawm. Saib peb cov ntaub ntawv txhawb nqa browser kom paub meej.
Vim li cas HTML5 txhais nws cov semantics, HTML tus cwj pwm tsisautofocus muaj txiaj ntsig hauv Bootstrap modals. Txhawm rau ua tiav cov txiaj ntsig zoo ib yam, siv qee qhov kev cai JavaScript:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Cov nyhuv animation ntawm cov khoom no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Khaws nyeem rau demos thiab cov lus qhia siv.

Piv txwv

Hauv qab no yog ib qho piv txwv zoo li qub (lub ntsiab lus nws positionthiab displaytau dhau los). Xws li yog lub taub hau modal, modal lub cev (yuav tsum tau rau padding), thiab modal footer (yeem). Peb thov kom koj suav nrog cov ntsiab lus ntawm kev tso tawm thaum twg los tau, lossis muab lwm qhov kev tso tawm ncaj qha.

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

Nyob demo

Toggle ib tug ua hauj lwm modal demo los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.

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

Static backdrop

Thaum backdrop yog teem rau zoo li qub, lub modal yuav tsis kaw thaum nias sab nraum nws. Nyem lub pob hauv qab no sim nws.

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

Scrolling cov ntsiab lus ntev

Thaum modals ntev dhau los rau tus neeg siv qhov chaw saib lossis ntaus ntawv, lawv scroll ywj siab ntawm nplooj ntawv nws tus kheej. Sim cov demo hauv qab no kom pom tias peb txhais li cas.

Koj tuaj yeem tsim tau ib qho scrollable modal uas tso cai rau scroll lub modal lub cev los ntawm kev ntxiv .modal-dialog-scrollablerau .modal-dialog.

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

Vertical centered

Ntxiv .modal-dialog-centeredmus .modal-dialograu vertically center lub 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>

Cov lus qhia thiab popovers

Cov lus qhia thiab popovers tuaj yeem muab tso rau hauv modals raws li xav tau. Thaum cov modals raug kaw, txhua yam lus qhia thiab cov popovers nyob rau hauv kuj raug tso tseg.

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

Siv daim phiaj

Siv lub Bootstrap kab sib chaws nyob rau hauv ib tug modal los ntawm nesting .container-fluidnyob rau hauv lub .modal-body. Tom qab ntawd, siv cov chav kawm kab ke ib txwm ua raws li koj xav tau nyob txhua qhov chaw.

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

Muaj ib pawg ntawm cov nyees khawm uas txhua tus ua rau tib lub qauv nrog cov ntsiab lus sib txawv me ntsis? Siv event.relatedTargetthiab HTML data-bs-*tus cwj pwm kom sib txawv ntawm cov ntsiab lus ntawm modal nyob ntawm seb lub pob twg raug nias.

Hauv qab no yog qhov ua yeeb yaj kiab nyob ua raws li piv txwv HTML thiab JavaScript. Yog xav paub ntxiv, nyeem cov xwm txheej modal docs kom paub meej txog 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 ntawm modals

Toggle ntawm ntau modals nrog qee qhov kev tso kawm ntse ntawm cov khoom data-bs-targetthiab data-bs-togglecov cwj pwm. Piv txwv li, koj tuaj yeem toggle tus password reset modal los ntawm hauv qhov qhib kos npe rau hauv modal. Thov nco ntsoov ntau modals tsis tuaj yeem qhib tib lub sijhawm - txoj kev no tsuas yog toggles ntawm ob qhov sib txawv modals.

Qhib thawj modal

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>

Hloov cov animation

Qhov $modal-fade-transformsib txawv txiav txim siab hloov lub xeev ntawm .modal-dialogua ntej modal ploj-hauv animation, qhov $modal-show-transformsib txawv txiav txim siab hloov pauv ntawm .modal-dialogqhov kawg ntawm modal fade-in animation.

Yog tias koj xav tau piv txwv zoom-hauv animation, koj tuaj yeem teeb tsa $modal-fade-transform: scale(.8).

Tshem tawm cov animation

Rau cov qauv uas tsuas yog tshwm sim ntau dua li ploj mus saib, tshem tawm cov .fadechav kawm los ntawm koj cov ntawv cim modal.

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

Dynamic qhov siab

Yog hais tias qhov siab ntawm lub modal hloov thaum nws qhib, koj yuav tsum hu myModal.handleUpdate()mus kho qhov modal txoj hauj lwm nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm.

Kev siv tau

Nco ntsoov ntxiv aria-labelledby="...", xa mus rau lub npe modal, rau .modal. Tsis tas li ntawd, koj tuaj yeem muab cov lus piav qhia ntawm koj lub modal dialog nrog aria-describedbyrau ntawm .modal. Nco ntsoov tias koj tsis tas yuav ntxiv role="dialog"vim peb twb ntxiv nws ntawm JavaScript.

Embedding YouTube yeeb yaj duab

Embedding YouTube yeeb yaj duab nyob rau hauv modals yuav tsum tau ntxiv JavaScript tsis nyob rau hauv Bootstrap kom cia li nres playback thiab ntau dua. Saib qhov pab tau Stack Overflow ncej kom paub ntau ntxiv.

Xaiv qhov ntau thiab tsawg

Modals muaj peb qhov ntau thiab tsawg, muaj nyob ntawm cov chav kawm hloov kho kom muab tso rau ntawm ib qho .modal-dialog. Cov qhov loj me no ncaws rau ntawm qee qhov chaw nres tsheb kom tsis txhob muaj kab rov tav scrollbars ntawm qhov nqaim dua.

Loj	Chav kawm	Modal max-dav
Me me	`.modal-sm`	`300px`
Default	Tsis muaj	`500px`
Loj	`.modal-lg`	`800px`
Ntxiv loj	`.modal-xl`	`1140px`

Peb default modal yam tsis muaj kev hloov kho chav kawm yog qhov "nruab nrab" modal.

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

Lwm qhov override yog qhov kev xaiv pop up modal uas npog cov neeg siv qhov chaw saib, muaj nyob ntawm cov chav kawm hloov kho uas tau muab tso rau hauv .modal-dialog.

Chav kawm	Muaj
`.modal-fullscreen`	Ib txwm
`.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

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov hloov pauv CSS hloov pauv mus kom ze, modals tam sim no siv cov CSS hauv zos sib txawv ntawm .modalthiab .modal-backdroprau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass variables

$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

Teb puv npo modals yog tsim los ntawm $breakpointsdaim ntawv qhia thiab lub voj hauv 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;
      }
    }
  }
}

Kev siv

Lub modal plugin toggles koj zais cov ntsiab lus ntawm kev thov, ntawm cov ntaub ntawv cwj pwm lossis JavaScript. Nws tseem overrides default scrolling cwj pwm thiab tsim ib tug .modal-backdroplos muab ib tug nias cheeb tsam rau dismissing qhia modals thaum txhaj sab nraum lub modal.

Los ntawm cov ntaub ntawv attributes

Toggle

Qhib lub modal yam tsis tau sau JavaScript. Teem data-bs-toggle="modal"rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-bs-target="#foo"lossis href="#foo"rau lub hom phiaj ib qho kev hloov pauv.

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

Tso tseg

Kev tshem tawm tuaj yeem ua tiav nrog tus datacwj pwm ntawm lub pob hauv lub modal raws li qhia hauv qab no:

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

los yog ntawm ib lub pob sab nraum lub modal siv data-bs-targetraws li qhia hauv qab no:

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

Txawm hais tias ob txoj hauv kev los tshem tawm ib qho qauv raug txhawb, nco ntsoov tias kev tshem tawm sab nraud ntawm tus qauv tsis sib xws ARIA Authoring Practices Guide dialog (modal) pattern . Ua qhov no ntawm koj tus kheej txaus ntshai.

Ntawm JavaScript

Tsim ib qho modal nrog ib kab ntawm JavaScript:

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

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, qhov kawg titletus nqi yuav yog 456thiab cov ntaub ntawv cais cov cwj pwm yuav override tus nqi muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Lub npe	Hom	Default	Kev piav qhia
`backdrop`	boolean,`'static'`	`true`	Xws li ib qho modal-backdrop element. Xwb, qhia meej `static`rau ib qho backdrop uas tsis kaw lub modal thaum clicked.
`focus`	boolean	`true`	Muab qhov tsom mus rau lub modal thaum pib.
`keyboard`	boolean	`true`	Kaw lub modal thaum khiav qhov tseem ceeb yog nias.

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Hla kev xaiv

Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Txoj kev	Kev piav qhia
`dispose`	Ua kom puas lub ntsiab ntawm modal. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
`getInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov qauv piv txwv cuam tshuam nrog DOM lub caij.
`getOrCreateInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov qauv piv txwv cuam tshuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib.
`handleUpdate`	Manually readjust lub modal txoj hauj lwm yog hais tias qhov siab ntawm ib tug modal hloov thaum nws qhib (piv txwv li nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm).
`hide`	Manually hides ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau muab zais tiag tiag (piv txwv li ua ntej qhov `hidden.bs.modal`xwm txheej tshwm sim).
`show`	Manually qhib lub modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim tiag tiag (piv txwv li ua ntej qhov `shown.bs.modal`xwm txheej tshwm sim). Tsis tas li ntawd, koj tuaj yeem dhau lub ntsiab lus DOM raws li kev sib cav uas tuaj yeem tau txais hauv cov xwm txheej modal (raws li cov `relatedTarget`cuab yeej). (ie `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Manually toggles ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim los yog muab zais (piv txwv li ua ntej qhov `shown.bs.modal`kev `hidden.bs.modal`tshwm sim tshwm sim).

Cov xwm txheej

Bootstrap's modal class exposes ob peb txheej xwm rau hooking rau hauv modal functionality. Tag nrho cov txheej xwm modal raug rho tawm haujlwm ntawm modal nws tus kheej (piv txwv li ntawm <div class="modal">).

Kev tshwm sim	Kev piav qhia
`hide.bs.modal`	Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum `hide`hu ua piv txwv txoj kev.
`hidden.bs.modal`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
`hidePrevented.bs.modal`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal raug pom, nws cov backdrop yog `static`thiab ib tug nias sab nraum lub modal yog ua. Qhov kev tshwm sim kuj raug rho tawm haujlwm thaum tus yuam sij khiav tawm thiab qhov `keyboard`kev xaiv tau teem rau `false`.
`show.bs.modal`	Qhov xwm txheej no tua hluav taws tam sim ntawd thaum `show`hu ua piv txwv. Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov `relatedTarget`cuab yeej ntawm qhov kev tshwm sim.
`shown.bs.modal`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov `relatedTarget`cuab yeej ntawm qhov kev tshwm sim.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})