Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Modal

Jiri ngwa mgbakwunye JavaScript nke Bootstrap ka ịgbakwunye mkparịta ụka na saịtị gị maka igbe ọkụ, ọkwa onye ọrụ, ma ọ bụ ọdịnaya omenala kpamkpam.

Na ibe a

Ka o si arụ ọrụ

Tupu ịmalite na akụrụngwa modal Bootstrap, jide n'aka na ị gụọ ihe ndị a ka nhọrọ nhọrọ anyị agbanweela n'oge na-adịbeghị anya.

  • Ejiri HTML, CSS, na JavaScript wuo usoro. A na-edowe ha n'ọkwa karịa ihe ọ bụla ọzọ dị na akwụkwọ ahụ wee wepụ akwụkwọ mpịakọta na <body>ya ka ọdịnaya modal wee pịgharịa kama.
  • Ịpị na modal "backdrop" ga-emechi modal ozugbo.
  • Bootstrap na-akwado naanị otu windo modal n'otu oge. Anaghị akwado ụdị akwụghị ụgwọ dịka anyị kwenyere na ha abụghị ahụmihe onye ọrụ adịghị mma.
  • Modals na-eji position: fixed, nke nwere ike mgbe ụfọdụ bụrụ ntakịrị ihe gbasara nsụgharị ya. Mgbe ọ bụla enwere ike, tinye HTML modal gị n'ọkwa dị elu ka ịzenarị ndabichi sitere na ihe ndị ọzọ. O yikarịrị ka ị ga-enwe nsogbu mgbe ị na-etinye ọnụ .modaln'ime ihe ọzọ edoziri.
  • Ọzọkwa, n'ihi position: fixed, e nwere ụfọdụ caveats na iji modals na mobile ngwaọrụ. Hụ docs nkwado ihe nchọgharị anyị maka nkọwa.
  • N'ihi ka HTML5 si akọwa semantics ya, àgwà autofocusHTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Nọgide na-agụ maka ngosi ngosi na ntuziaka ojiji.

Ihe atụ

N'okpuru ebe a bụ ihe atụ modal staticposition (pụtara ya na displaya gafeworo ya). Agụnyere bụ modal nkụnye eji isi mee, modal body (chọrọ maka padding), na modal footer (nhọrọ). Anyị na-arịọ gị ka ịtinye ndị nkụnye eji isi mee ihe na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ ọzọ doro anya.

Aha modal

Ederede ahụ Modal na-aga ebe a.

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

Ihe ngosi dị ndụ

Gbanwee ngosi ngosi na-arụ ọrụ site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

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

Ebe static

Mgbe atọrọ backdrop ka ọ kwụ ọtọ, modal agaghị emechi mgbe ịpị na mpụga ya. Pịa bọtịnụ dị n'okpuru ka ịnwale ya.

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

Na-atụgharị ọdịnaya ogologo

Mgbe modals toro ogologo maka nlele ma ọ bụ ngwaọrụ onye ọrụ, ha na-atụgharị na ibe ahụ n'onwe ya. Gbalịa ngosi n'okpuru ka ịhụ ihe anyị na-ekwu.

Ị nwekwara ike ịmepụta modal mpịakọta nke na-enye ohere ịpịgharịa modal ahụ site na ịgbakwunye .modal-dialog-scrollablena .modal-dialog.

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

gbadoro ụkwụ na kwụ ọtọ

Tinye .modal-dialog-centeredna .modal-dialogn'etiti modal kwụ ọtọ.

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

Ntuziaka ngwaọrụ na popovers

Enwere ike itinye ndụmọdụ na popovers n'ime modal dị ka achọrọ. Mgbe emechiri modal, ndụmọdụ ngwaọrụ ọ bụla na popovers dị n'ime na-ewepụkwa ozugbo.

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

Iji grid

Jiri usoro grid Bootstrap n'ime modal site na itinye akwụ .container-fluidn'ime .modal-body. Mgbe ahụ, jiri klaasị sistemụ grid nkịtị ka ị ga-eme ebe ọ bụla ọzọ.

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

Modal ọdịnaya dị iche iche

Nwere ụyọkọ bọtịnụ niile na-ebute otu modal nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-bs-* gbanwee ọdịnaya nke modal dabere na bọtịnụ nke pịrị.

N'okpuru ebe a bụ ngosi dị ndụ nke HTML na Javascript na-esote. Maka ozi ndị ọzọ, gụọ ihe omume modal docs maka nkọwa na 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
})

Gbanwee n'etiti modal

Gbanwee n'etiti ọtụtụ modal nwere amamihe pụrụ iche nke ntinye data-bs-targetna data-bs-togglenjirimara. Dịka ọmụmaatụ, ịnwere ike ịgbanwe modal nrụpụta okwuntughe site n'ime modal mbinye aka mepere emepe. Biko mara na enwere ike imeghe ọtụtụ modal n'otu oge - usoro a na-atụgharị n'etiti ụdị abụọ dị iche iche.

Mepee modal mbụ
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>

Gbanwee animation

Ndị na $modal-fade-transform-agbanwe agbanwe na-ekpebi ọnọdụ mgbanwe nke .modal-dialogtupu modal fade-na animation, $modal-show-transformmgbanwe na-ekpebi mgbanwe nke .modal-dialogna njedebe nke modal fade-na animation.

Ọ bụrụ na ịchọrọ ọmụmaatụ ihe ngosi mbugharị, ị nwere ike ịtọ $modal-fade-transform: scale(.8).

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Ogologo dị ike

Ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe, ị ga-akpọ myModal.handleUpdate()maka ịhazigharị ọnọdụ modal ahụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara.

Nnweta

Jide n'aka na ịtinye aria-labelledby="...", na-ezo aka na aha modal, na .modal. Na mgbakwunye, ịnwere ike ịnye nkọwa nke mkparịta ụka modal gị na aria-describedbyna .modal. Mara na ịchọghị ịgbakwunye role="dialog"ebe ọ bụ na anyị tinyegoro ya site na Javascript.

Na-etinye vidiyo YouTube

Ịtinye vidiyo YouTube na ụdịdị chọrọ Javascript agbakwunyere ọ bụghị na Bootstrap ka ọ kwụsị ịkpọghachi na-akpaghị aka na ihe ndị ọzọ. Hụ akwụkwọ ozi Stack Overflow a na-enyere aka maka ozi ndị ọzọ.

Nha nhọrọ

Modal nwere nha nhọrọ atọ, dị site na klaasị modifier ka etinye ya na .modal-dialog. Nha ndị a na-abanye n'ebe nkwụsịtụ ụfọdụ ka ịzenarị akwụkwọ mpịakọta kwụ ọtọ n'ọdụ ụgbọ mmiri dị warara.

Nha Klas Modal max-obosara
Obere .modal-sm 300px
Ọdabara Ọ dịghị 500px
Nnukwu .modal-lg 800px
Nnukwu ibu .modal-xl 1140px

Modal ndabara anyị na-enweghị klas modifier bụ modal nha “ọkara”.

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

Modal ihuenyo zuru oke

Nkwụsị ọzọ bụ nhọrọ iji wepụta modal na-ekpuchi ebe nlele onye ọrụ, dị site na klaasị modifier nke etinyere na faịlụ .modal-dialog.

Klas Nnweta
.modal-fullscreen Mgbe niile
.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

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke ụzọ mgbanwe mgbanwe CSS nke Bootstrap, modals na-eji mgbanwe CSS mpaghara na .modalyana .modal-backdropmaka nkwalite nhazi oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

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

A na-emepụta ụdịdị ihuenyo zuru ezu na-anabata site na $breakpointsmaapụ yana loop na 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;
      }
    }
  }
}

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-ewepụkwa omume mpịachi nke ndabara ma na-ewepụta a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ ụdịdị egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Tụgharịa

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-bs-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-bs-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

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

Wepụ

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime modal dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ na- abụghị modal na -eji data-bs-targetdị ka egosiri n'okpuru:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Ọ bụ ezie na a na-akwado ụzọ abụọ a ga-esi wepụ modal, buru n'uche na ịchụpụ site n'èzí modal adabaghị na ARIA Authoring Practices Guide dialog (modal) . Mee nke a n'ihe egwu nke gị.

Site JavaScript

Mepụta modal nwere otu ahịrị Javascript:

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

Nhọrọ

Dịka enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript, ị nwere ike itinye aha nhọrọ na data-bs-, dịka na data-bs-animation="{value}". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na " camelCase " gaa na " kebab-case " mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, jiri data-bs-custom-class="beautifier"kama data-bs-customClass="beautifier".

Dịka nke Bootstrap 5.2.0, akụrụngwa niile na-akwado njirimara data echekwara nnwaledata-bs-config nke nwere ike idobe nhazi akụrụngwa dị mfe dị ka eriri JSON. Mgbe mmewere nwere data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"njiri mara, uru ikpeazụ titlega-abụ 456na njirimara data dị iche ga-ewepụ ụkpụrụ enyere na data-bs-config. Na mgbakwunye, njirimara data dị adị nwere ike idobe ụkpụrụ JSON dịka data-bs-delay='{"show":0,"hide":150}'.

Aha Ụdị Ọdabara Nkọwa
backdrop boolean,'static' true Na-agụnye ihe modal-backdrop element. N'aka nke ọzọ, ezipụta staticmaka backdrop nke na-adịghị emechi modal mgbe ịpịrị ya.
focus boolean true Na-etinye uche na modal mgbe ebido ya.
keyboard boolean true Na-emechi modal mgbe ịpịrị igodo mgbapụ.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Nhọrọ nhọrọ

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Usoro Nkọwa
dispose Na-emebi ụkpụrụ mmewere. (Na-ewepụ data echekwara na mmewere DOM)
getInstance Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na ihe DOM.
getOrCreateInstance Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na mmewere DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.
handleUpdate Jiri aka dozie ọnọdụ modal ma ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe (ya bụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara).
hide Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).
show Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee). Ọzọkwa, ị nwere ike ịgafe ihe DOM dị ka arụmụka nwere ike ịnweta na ihe omume modal (dị ka ihe relatedTargetonwunwe). (ya bu const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal. A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

Ihe omume Nkọwa
hide.bs.modal A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
hidden.bs.modal A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe CSS ka agwụchaa).
hidePrevented.bs.modal A na-agbapụ ihe omume a mgbe egosiri modal ahụ, ndabere ya bụ staticma pịa n'èzí modal ahụ. A na-agbapụkwa mmemme ahụ mgbe ịpịrị igodo ụzọ mgbapụ ma keyboardtọọ nhọrọ ka false.
show.bs.modal Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ. Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka relatedTargetihe nke mmemme ahụ.
shown.bs.modal A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere mgbanwe CSS ka ọ gwụchaa). Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka relatedTargetihe nke mmemme ahụ. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})