Source

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.

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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Patindog nga nakasentro

Idugang .modal-dialog-centeredngadto .modal-dialogsa vertically center ang modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-*hiyas (posible pinaagi sa jQuery ) aron lainlain ang mga sulod 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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" role="dialog" 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').modal('handleUpdate')aron ayohon ang posisyon sa modal kung adunay usa ka scrollbar nga makita.

Accessibility

Siguruha nga idugang role="dialog"ug aria-labelledby="...", nga maghisgot sa modal nga titulo, sa .modal, ug role="document"sa .modal-dialogkaugalingon. Dugang pa, mahimo kang maghatag ug deskripsyon sa imong modal dialog sa aria-describedbyon .modal.

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.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Paggamit

Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Nagdugang usab .modal-openkini sa <body>pag-override sa default nga pamatasan sa pag-scroll ug nagmugna usa ka .modal-backdroparon mahatagan usa ka lugar sa pag-klik 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-toggle="modal"sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"o href="#foo"sa target sa usa ka piho nga modal sa toggle.

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

Pinaagi sa JavaScript

Pagtawag og modal nga adunay id myModalnga adunay usa ka linya sa JavaScript:

$('#myModal').modal(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-, sama sa data-backdrop="".

Ngalan Matang Default Deskripsyon
backdrop boolean o ang string'static' tinuod Naglakip sa usa ka elemento sa modal-backdrop. Sa laing paagi, ipiho staticang usa ka backdrop nga wala magsira sa modal sa pag-klik.
keyboard boolean tinuod Pagsira sa modal kung ang escape key gipugos
focus boolean tinuod Gibutang ang focus sa modal kung gisugdan.
ipakita boolean tinuod Nagpakita 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 .

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('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').modal('toggle')

.modal('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).

$('#myModal').modal('show')

.modal('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).

$('#myModal').modal('hide')

.modal('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').modal('handleUpdate')

.modal('dispose')

Makaguba sa modal sa usa ka elemento.

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 Hitabo Deskripsyon
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.
gipakita.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.
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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})