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:

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

myModal.addEventListener('shown.bs.modal', function () {
  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.

<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 popover-test" 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="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" 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>

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.

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

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var 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.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var 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

<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" data-bs-dismiss="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" data-bs-dismiss="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>

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`	Ubos`576px`
`.modal-fullscreen-md-down`	Ubos`768px`
`.modal-fullscreen-lg-down`	Ubos`992px`
`.modal-fullscreen-xl-down`	Ubos`1200px`
`.modal-fullscreen-xxl-down`	Ubos`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Mga variable

$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:        rgba($black, .2);
$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:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-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-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 {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

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

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>

Pinaagi sa JavaScript

Paghimo og modal nga adunay usa ka linya sa JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-backdrop="".

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

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.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

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

myModal.toggle()

ipakita

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

myModal.show()

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

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

itago

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

myModal.hide()

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

myModal.handleUpdate()

ilabay

Makaguba sa modal sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)

myModal.dispose()

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa modal nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

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.

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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">).

Uri sa panghitabo	Deskripsyon
`show.bs.modal`	Kini nga panghitabo nagdilaab dayon kung ang `show`pamaagi sa pananglitan gitawag. Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga `relatedTarget`kabtangan 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 `relatedTarget`kabtangan sa panghitabo.
`hide.bs.modal`	Kini nga panghitabo gipabuto dayon kung ang `hide`pamaagi 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 `static`ug usa ka pag-klik sa gawas sa modal o usa ka escape key press ang gihimo gamit ang kapilian sa keyboard o `data-bs-keyboard`gitakda sa `false`.

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