Modal

Gamitin ang JavaScript modal plugin ng Bootstrap upang magdagdag ng mga dialog sa iyong site para sa mga lightbox, notification ng user, o ganap na custom na content.

Paano ito gumagana

Bago magsimula sa modal component ng Bootstrap, siguraduhing basahin ang mga sumusunod dahil ang aming mga opsyon sa menu ay nagbago kamakailan.

Ang mga modal ay binuo gamit ang HTML, CSS, at JavaScript. Ang mga ito ay nakaposisyon sa lahat ng iba pa sa dokumento at alisin ang scroll mula sa <body>upang ang modal na nilalaman ay mag-scroll sa halip.
Ang pag-click sa modal na "backdrop" ay awtomatikong isasara ang modal.
Sinusuportahan lamang ng Bootstrap ang isang modal window sa isang pagkakataon. Hindi sinusuportahan ang mga nested modal dahil naniniwala kami na ang mga ito ay hindi magandang karanasan ng user.
Ginagamit ang mga modal position: fixed, na kung minsan ay medyo partikular sa pag-render nito. Hangga't maaari, ilagay ang iyong modal HTML sa isang top-level na posisyon upang maiwasan ang potensyal na interference mula sa iba pang mga elemento. Malamang na magkakaroon ka ng mga isyu kapag nag-nest ng isang sa .modalloob ng isa pang nakapirming elemento.
Muli, dahil sa position: fixed, may ilang mga caveat sa paggamit ng mga modal sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.
Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocusHTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Panatilihin ang pagbabasa para sa mga demo at mga alituntunin sa paggamit.

Mga halimbawa

Nasa ibaba ang isang static na halimbawa ng modal (ibig sabihin nito positionat displayna-override na). Kasama ang modal header, modal body (kinakailangan para sa padding), at modal footer (opsyonal). Hinihiling namin na isama mo ang mga modal header na may mga pagkilos na i-dismiss hangga't maaari, o magbigay ng isa pang tahasang pagkilos sa pag-dismiss.

<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="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 na demo

I-toggle ang gumaganang modal demo sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

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

Static na backdrop

Kapag nakatakda ang backdrop sa static, hindi magsasara ang modal kapag nag-click sa labas nito. I-click ang button sa ibaba upang subukan ito.

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">Understood</button>
      </div>
    </div>
  </div>
</div>

Pag-scroll ng mahabang nilalaman

Kapag masyadong mahaba ang mga modal para sa viewport o device ng user, nag-i-scroll sila nang hiwalay sa mismong page. Subukan ang demo sa ibaba upang makita kung ano ang ibig naming sabihin.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

Maaari ka ring gumawa ng scrollable modal na nagbibigay-daan sa pag-scroll sa modal body sa pamamagitan ng pagdaragdag .modal-dialog-scrollablesa .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

Patayong nakasentro

Idagdag .modal-dialog-centeredsa .modal-dialogpatayo na igitna 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 at popover

Ang mga tooltip at popover ay maaaring ilagay sa loob ng mga modal kung kinakailangan. Kapag isinara ang mga modal, awtomatikong dini-dismiss din ang anumang tooltip at popover sa loob.

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

Gamit ang grid

Gamitin ang Bootstrap grid system sa loob ng isang modal sa pamamagitan ng pagpupugad sa .container-fluidloob ng .modal-body. Pagkatapos, gamitin ang normal na mga klase ng sistema ng grid gaya ng gagawin mo saanman.

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

May isang grupo ng mga pindutan na lahat ay nagpapalitaw ng parehong modal na may bahagyang magkakaibang mga nilalaman? Gamitin event.relatedTargetat HTML na mga data-*katangian (maaaring sa pamamagitan ng jQuery ) upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click.

Nasa ibaba ang isang live na demo na sinusundan ng halimbawang HTML at JavaScript. Para sa higit pang impormasyon, basahin ang mga modal event 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" 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="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)
})

Baguhin ang animation

Tinutukoy $modal-fade-transformng variable ang katayuan ng pagbabago .modal-dialogbago ang animation ng modal fade-in, $modal-show-transformtinutukoy ng variable ang pagbabago ng .modal-dialogsa dulo ng animation ng modal fade-in.

Kung gusto mo halimbawa ng zoom-in na animation, maaari mong itakda ang $modal-fade-transform: scale(.8).

Alisin ang animation

Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fadeklase sa iyong modal markup.

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

Mga dinamikong taas

Kung nagbabago ang taas ng isang modal habang ito ay bukas, dapat kang tumawag $('#myModal').modal('handleUpdate')upang muling ayusin ang posisyon ng modal kung sakaling lumitaw ang isang scrollbar.

Accessibility

Tiyaking idagdag aria-labelledby="..."ang , na tumutukoy sa pamagat ng modal, sa .modal. Bukod pa rito, maaari kang magbigay ng paglalarawan ng iyong modal dialog na may aria-describedbysa .modal. Tandaan na hindi mo na kailangang magdagdag role="dialog"dahil naidagdag na namin ito sa pamamagitan ng JavaScript.

Pag-embed ng mga video sa YouTube

Ang pag-embed ng mga video sa YouTube sa mga modal ay nangangailangan ng karagdagang JavaScript na wala sa Bootstrap upang awtomatikong ihinto ang pag-playback at higit pa. Tingnan ang kapaki-pakinabang na post na ito ng Stack Overflow para sa higit pang impormasyon.

Mga opsyonal na laki

Ang mga modal ay may tatlong opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .modal-dialog. Ang mga laki na ito ay nagsisimula sa ilang mga breakpoint upang maiwasan ang mga pahalang na scrollbar sa mas makitid na viewport.

Sukat	Klase	Modal na max-width
Maliit	`.modal-sm`	`300px`
Default	wala	`500px`
Malaki	`.modal-lg`	`800px`
Sobrang laki	`.modal-xl`	`1140px`

Ang aming default na modal na walang modifier class ay bumubuo ng "medium" size modal.

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

Paggamit

I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Nagdaragdag din ito .modal-opensa <body>to override default na pag-scroll na gawi at bumubuo ng .modal-backdroppara magbigay ng lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nag-click sa labas ng modal.

Sa pamamagitan ng mga katangian ng data

Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.

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

Sa pamamagitan ng JavaScript

Tumawag ng modal na may id myModalna may isang linya ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".

Pangalan	Uri	Default	Paglalarawan
backdrop	boolean o ang string`'static'`	totoo	May kasamang modal-backdrop na elemento. Bilang kahalili, tumukoy `static`para sa isang backdrop na hindi nagsasara ng modal sa pag-click.
keyboard	boolean	totoo	Isinasara ang modal kapag pinindot ang escape key
focus	boolean	totoo	Inilalagay ang focus sa modal kapag nasimulan.
palabas	boolean	totoo	Ipinapakita ang modal kapag nasimulan.

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

`.modal(options)`

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

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

`.modal('toggle')`

Manu-manong i-toggle ang isang modal. Bumabalik sa tumatawag bago ang modal ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.modalo hidden.bs.modalkaganapan).

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

`.modal('show')`

Manu-manong nagbubukas ng modal. Bumabalik sa tumatawag bago aktwal na naipakita ang modal (ibig sabihin, bago shown.bs.modalmangyari ang kaganapan).

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

`.modal('hide')`

Manu-manong nagtatago ng modal. Bumabalik sa tumatawag bago pa talaga naitago ang modal (ibig sabihin, bago hidden.bs.modalmangyari ang kaganapan).

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

`.modal('handleUpdate')`

Manu-manong muling ayusin ang posisyon ng modal kung ang taas ng isang modal ay nagbabago habang ito ay bukas (ibig sabihin, kung sakaling lumitaw ang isang scrollbar).

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

`.modal('dispose')`

Sinisira ang modal ng isang elemento.

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality. Ang lahat ng modal na kaganapan ay pinapagana sa modal mismo (ibig sabihin, sa <div class="modal">).

Uri ng kaganapan	Paglalarawan
show.bs.modal	Agad na gagana ang kaganapang ito kapag `show`tinawag ang paraan ng instance. Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- `relatedTarget`aari ng kaganapan.
ipinapakita.bs.modal	Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- `relatedTarget`aari ng kaganapan.
hide.bs.modal	Agad na pinapagana ang kaganapang ito kapag `hide`tinawag na ang paraan ng instance.
hidden.bs.modal	Ang kaganapang ito ay papaganahin kapag ang modal ay tapos nang itago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).
hidePrevented.bs.modal	Ang kaganapang ito ay pinapagana kapag ang modal ay ipinakita, ang backdrop nito `static`at ang isang pag-click sa labas ng modal o isang pagpindot sa escape key ay isinasagawa gamit ang opsyon sa keyboard o `data-keyboard`nakatakda sa `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})