Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Modal

Gamita ang JavaScript modal plugin sa Bootstrap aron idugang ang mga diyalogo sa imong site para sa mga lightbox, pahibalo sa tiggamit, o hingpit nga naandan nga sulud.

Niini nga panid

Giunsa kini paglihok

Sa dili pa magsugod sa modal component sa Bootstrap, siguroha nga basahon ang mosunod kay bag-o lang nausab ang among mga opsyon sa menu.

  • Gitukod ang mga modal gamit ang HTML, CSS, ug JavaScript. Gipahimutang sila sa tanan nga butang sa dokumento ug kuhaa ang scroll gikan sa <body>aron ang modal nga sulud mag-scroll sa baylo.
  • Ang pag-klik sa modal "backdrop" awtomatik nga magsira sa modal.
  • Ang Bootstrap nagsuporta lamang sa usa ka modal window sa usa ka higayon. Ang mga nested modals dili suportado tungod kay kami nagtuo nga kini dili maayo nga mga kasinatian sa tiggamit.
  • Ang paggamit sa mga modal position: fixed, nga usahay medyo partikular bahin sa paghubad niini. Kung mahimo, ibutang ang imong modal HTML sa taas nga lebel nga posisyon aron malikayan ang posibleng pagpanghilabot sa ubang mga elemento. Mahimong makaatubang ka sa mga isyu kung magsalag sa usa .modalsa lain nga naayos nga elemento.
  • Sa makausa pa, tungod sa position: fixed, adunay pipila ka mga caveat sa paggamit sa modals sa mga mobile device. Tan-awa ang among browser support docs para sa mga detalye.
  • Tungod sa kung giunsa paghubit sa HTML5 ang mga semantiko niini, ang autofocusHTML attribute walay epekto sa Bootstrap modals. Aron makab-ot ang parehas nga epekto, gamita ang pipila ka naandan nga JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Padayon sa pagbasa alang sa mga demo ug mga panudlo sa paggamit.

Mga pananglitan

Sa ubos mao ang usa ka static modal nga pananglitan (nagpasabot nga kini positionug displayna-overridden). Apil ang modal header, modal body (gikinahanglan alang sa padding), ug modal footer (opsyonal). Gihangyo namo nga iapil nimo ang mga modal header nga adunay mga aksyon sa pag-dismiss kung mahimo, o paghatag og lain nga tin-aw nga aksyon sa pagtangtang.

Modal nga titulo

Modal body text adto dinhi.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Live nga demo

I-toggle ang usa ka working modal demo pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.

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

Kung ang backdrop gibutang sa static, ang modal dili magsira kung mag-klik sa gawas niini. I-klik ang buton sa ubos aron sulayan kini.

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

Pag-scroll sa taas nga sulud

Kung ang mga modals mahimong taas kaayo alang sa viewport o aparato sa gumagamit, sila mag-scroll nga independente sa panid mismo. Sulayi ang demo sa ubos aron makita kung unsa ang among gipasabut.

Makahimo ka usab og usa ka scrollable modal nga nagtugot sa pag-scroll sa modal nga lawas pinaagi sa pagdugang .modal-dialog-scrollablesa .modal-dialog.

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

Patindog nga nakasentro

Idugang .modal-dialog-centeredngadto .modal-dialogsa vertically center ang 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>

Mga tooltip ug popovers

Ang mga tooltip ug popovers mahimong ibutang sulod sa modals kung gikinahanglan. Kung sirado ang mga modal, ang bisan unsang mga tooltip ug popover sa sulod awtomatiko usab nga gisalikway.

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

Paggamit sa grid

Gamita ang Bootstrap grid system sulod sa usa ka modal pinaagi sa pagsalag .container-fluidsulod sa .modal-body. Dayon, gamita ang normal nga mga klase sa sistema sa grid sama sa imong buhaton bisan asa.

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

Nagkalainlain nga sulud sa modal

Adunay usa ka hugpong sa mga buton nga ang tanan nag-trigger sa parehas nga modal nga adunay gamay nga lainlaing mga sulud? Paggamit event.relatedTargetug HTML nga mga data-bs-*hiyas aron lainlain ang mga sulud sa modal depende kung unsang buton ang gi-klik.

Sa ubos usa ka live demo nga gisundan sa pananglitan sa HTML ug JavaScript. Para sa dugang nga impormasyon, basaha ang modal nga mga panghitabo docs para sa mga detalye sa 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
})

Pagbalhin tali sa mga modal

Pag-toggle tali sa daghang mga modals nga adunay pipila ka maalamon nga pagbutang sa data-bs-targetug mga data-bs-togglehiyas. Pananglitan, mahimo nimong i-toggle ang modala sa pag-reset sa password gikan sa sulod sa usa ka bukas na nga sign in modal. Palihug timan-i ang daghang mga modals dili mahimong bukas sa parehas nga oras - kini nga pamaagi yano nga magbalhinbalhin tali sa duha nga magkalainlain nga mga modal.

Ablihi ang una nga 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>

Usba ang animation

Ang $modal-fade-transformvariable nagtino sa pagbag-o nga kahimtang sa sa .modal-dialogwala pa ang modal fade-in animation, ang $modal-show-transformvariable nagtino sa pagbag-o sa .modal-dialogsa katapusan sa modal fade-in animation.

Kung gusto nimo pananglitan ang usa ka zoom-in nga animation, mahimo nimong itakda $modal-fade-transform: scale(.8).

Kuhaa ang animation

Alang sa mga modals nga yano nga makita imbes nga mawala aron makita, kuhaa ang .fadeklase gikan sa imong modal markup.

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

Dinamikong gitas-on

Kung ang gitas-on sa usa ka modal mausab samtang kini bukas, kinahanglan ka nga tawagan myModal.handleUpdate()aron ayohon ang posisyon sa modal kung adunay usa ka scrollbar nga makita.

Accessibility

Siguruha nga idugang ang aria-labelledby="...", nga nagpunting sa modal nga titulo, sa .modal. Dugang pa, mahimo kang maghatag ug deskripsyon sa imong modal dialog sa aria-describedbyon .modal. Timan-i nga dili nimo kinahanglan nga idugang role="dialog"tungod kay gidugang na namo kini pinaagi sa JavaScript.

Pag-embed sa mga video sa YouTube

Ang pag-embed sa mga video sa YouTube sa modals nanginahanglan dugang nga JavaScript nga wala sa Bootstrap aron awtomatiko nga ihunong ang playback ug daghan pa. Tan-awa kining makatabang nga post sa Stack Overflow alang sa dugang nga impormasyon.

Opsyonal nga mga gidak-on

Ang mga modala adunay tulo ka opsyonal nga gidak-on, nga magamit pinaagi sa mga klase sa modifier nga ibutang sa usa ka .modal-dialog. Kini nga mga gidak-on nagsugod sa pipila ka mga breakpoint aron malikayan ang pinahigda nga mga scrollbar sa mas pig-ot nga mga viewport.

Gidak-on Klase Modal max-lapad
Gamay .modal-sm 300px
Default Wala 500px
Dako .modal-lg 800px
Dugang dako .modal-xl 1140px

Ang among default modal nga walay modifier class naglangkob sa "medium" size modal.

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

Fullscreen Modal

Ang lain nga override mao ang kapilian sa pag-pop up sa usa ka modal nga naglangkob sa viewport sa user, nga magamit pinaagi sa mga klase sa modifier nga gibutang sa usa ka .modal-dialog.

Klase Anaa
.modal-fullscreen Kanunay
.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

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga modals karon naggamit sa lokal nga CSS variables sa .modalug .modal-backdropalang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

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

Ang mga responsive fullscreen modals gihimo pinaagi sa $breakpointsmapa ug usa ka loop sa 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;
      }
    }
  }
}

Paggamit

Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Gi-override usab niini ang default nga pag-scroll sa pamatasan ug nagmugna og usa .modal-backdropka pag-klik nga lugar alang sa pagtangtang sa gipakita nga modals kung nag-klik sa gawas sa modal.

Pinaagi sa data attributes

Toggle

Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-bs-toggle="modal"sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-bs-target="#foo"o href="#foo"sa target sa usa ka piho nga modal sa toggle.

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

Isalikway

Ang pagtangtang mahimong makab-ot gamit ang datahiyas sa usa ka buton sulod sa modal nga gipakita sa ubos:

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

o sa usa ka buton sa gawas sa modal gamit ang data-bs-targetgipakita sa ubos:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Samtang gisuportahan ang duha ka paagi sa pag-dismiss sa usa ka modal, hinumdomi nga ang pag-dismiss gikan sa gawas sa usa ka modal dili motakdo sa ARIA Authoring Practices Guide dialog (modal) pattern . Buhata kini sa imong kaugalingong risgo.

Pinaagi sa JavaScript

Paghimo og modal nga adunay usa ka linya sa JavaScript:

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Ngalan Matang Default Deskripsyon
backdrop boolean,'static' true Naglakip sa usa ka elemento sa modal-backdrop. Sa laing paagi, ipiho staticang usa ka backdrop nga dili magsira sa modal kung gi-klik.
focus boolean true Gibutang ang focus sa modal kung gisugdan.
keyboard boolean true Pagsira sa modal kung ang escape key gipugos.

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Mga kapilian sa pagpasa

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Pamaagi Deskripsyon
dispose Makaguba sa modal sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
getInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa modal nga pananglitan nga may kalabutan sa usa ka elemento sa DOM.
getOrCreateInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa modal nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
handleUpdate Manwal nga i-adjust ang posisyon sa modal kung ang gitas-on sa usa ka modal mausab samtang kini bukas (pananglitan kung adunay makita nga scrollbar).
hide Manwal nga nagtago sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gitago (ie sa wala pa hidden.bs.modalmahitabo ang panghitabo).
show Manwal nga nagbukas sa usa ka modal. Mibalik sa nagtawag sa wala pa ipakita ang modal (ie sa wala pa shown.bs.modalmahitabo ang panghitabo). Usab, mahimo nimong ipasa ang usa ka elemento sa DOM ingon usa ka argumento nga mahimong madawat sa mga modal nga panghitabo (ingon nga relatedTargetkabtangan). (ie const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manwal nga mag-toggle sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.modalo hidden.bs.modalpanghitabo).

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality. Ang tanan nga modal nga mga panghitabo gipabuto sa modal mismo (ie sa <div class="modal">).

Panghitabo Deskripsyon
hide.bs.modal Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.modal Kini nga panghitabo gipabuto kung ang modal nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hidePrevented.bs.modal Kini nga panghitabo gipabuto kung ang modal gipakita, ang backdrop niini staticug ang pag-klik sa gawas sa modal gihimo. Ang panghitabo gipabuto usab kung ang escape key gipugos ug ang keyboardkapilian gibutang sa false.
show.bs.modal Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag. Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTargetkabtangan sa panghitabo.
shown.bs.modal Kini nga panghitabo gipabuto kung ang modal nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTargetkabtangan sa panghitabo. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})