in English

Modal

E hoʻohana i kā Bootstrap JavaScript modal plugin e hoʻohui i nā kamaʻilio i kāu pūnaewele no nā pahu kukui, nā hoʻolaha mea hoʻohana, a i ʻole nā mea maʻamau.

Pehea e hana ai

Ma mua o ka hoʻomaka ʻana me ka ʻāpana modal o Bootstrap, e ʻoluʻolu e heluhelu i kēia aʻe no ka mea ua loli hou kā mākou koho papa inoa.

Kūkulu ʻia nā ʻano me HTML, CSS, a me JavaScript. Hoʻonoho ʻia lākou ma luna o nā mea ʻē aʻe o ka palapala a wehe i ka ʻōwili mai ka <body>mea i ʻōwili ʻia nā ʻike modal.
Ke kaomi 'ana i ka modal "backdrop" e pani 'akomi i ka modal.
Kākoʻo ʻo Bootstrap i hoʻokahi puka aniani modal i ka manawa. ʻAʻole kākoʻo ʻia nā modal nested no ka mea ke manaʻoʻiʻo nei mākou he mau mea hoʻohana maikaʻi ʻole.
Hoʻohana ʻia nā modals position: fixed, hiki i kekahi manawa ke ʻano kikoʻī e pili ana i kāna hana. I nā manawa a pau e hiki ai, e kau i kāu HTML modal ma kahi kūlana kiʻekiʻe e pale aku i ka hoʻopilikia ʻana mai nā mea ʻē aʻe. Loaʻa paha ʻoe i nā pilikia ke hoʻopaʻa ʻia i .modalloko o kahi mea paʻa ʻē aʻe.
Eia hou, ma muli o position: fixed, aia kekahi mau hōʻailona me ka hoʻohana ʻana i nā modals ma nā polokalamu kelepona. E ʻike i kā mākou palapala kākoʻo polokalamu kele no nā kikoʻī.
Ma muli o ka wehewehe ʻana o HTML5 i kāna mau semantics, ʻaʻohe hopena o ke ʻano autofocusHTML i nā modals Bootstrap. No ka loaʻa ʻana o ka hopena like, e hoʻohana i kekahi JavaScript maʻamau:

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

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

E hoʻomau i ka heluhelu no nā demos a me nā alakaʻi hoʻohana.

Nā laʻana

Aia ma lalo kahi laʻana modal staticposition (ʻo ia hoʻi ʻo ia a displayua hoʻopau ʻia). Hoʻokomo pū ʻia ke poʻomanaʻo modal, kino kino (pono no padding), a me ka footer modal (koho). Ke noi aku nei mākou iā ʻoe e hoʻokomo i nā poʻomanaʻo modal me nā hana hoʻokuʻu i ka wā hiki, a i ʻole e hāʻawi i kahi hana hoʻokuʻu ʻē aʻe.

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

Demo ola

E hoʻololi i kahi demo modal hana ma ke kaomi ʻana i ke pihi ma lalo. E paheʻe ia i lalo a mae mai ka piko o ka ʻaoʻao.

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

Kāpae kūmau

Ke hoʻonohonoho ʻia ka backdrop i static, ʻaʻole e pani ka modal ke kaomi ʻana ma waho. Kaomi i ke pihi ma lalo e hoʻāʻo.

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

ʻOka maʻiʻo lōʻihi

Ke lilo nā modals i lōʻihi no ka nānā ʻana o ka mea hoʻohana a i ʻole ka mea hoʻohana, ʻōwili kūʻokoʻa lākou mai ka ʻaoʻao ponoʻī. E ho'āʻo i ka demo ma lalo nei e ʻike i kā mākou manaʻo.

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.

Hiki iā ʻoe ke hana i kahi modal scrollable e hiki ai ke ʻōwili i ke kino modal ma ka hoʻohui .modal-dialog-scrollableʻana i .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>

Kūwaena kū pololei

Hoʻohui .modal-dialog-centeredi .modal-dialogke kikowaena kū pololei i ka 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>

Nā mea hana a me nā popovers

Hiki ke waiho ʻia nā mea hana a me nā popovers i loko o nā modals e like me ka mea e pono ai . Ke pani ʻia nā modals, hoʻokuʻu ʻia nā mea hana a me nā popovers i loko.

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

Ke hoʻohana nei i ka pā

E hoʻohana i ka ʻōnaehana mākia Bootstrap i loko o kahi modal ma ka hoʻomoe ʻana .container-fluidi loko o ka .modal-body. A laila, e hoʻohana i nā papa ʻōnaehana maʻamau e like me kāu e hana ai ma nā wahi ʻē aʻe.

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

Loaʻa i kahi pūʻulu o nā pihi e hoʻoulu ai i ke ʻano like me nā mea ʻokoʻa iki? E hoʻohana event.relatedTargeta me nā ʻano HTMLdata-* ( ma o jQuery paha ) e hoʻololi i nā ʻike o ka modal ma muli o ke pihi i kaomi ʻia.

Aia ma lalo kahi demo ola i ukali ʻia e ka HTML a me JavaScript. No ka ʻike hou aku, e heluhelu i nā moʻolelo hanana hanana no nā kikoʻī ma 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)
})

E hoʻololi i ke ʻano hana

Hoʻoholo ka $modal-fade-transformʻano hoʻololi i ke kūlana hoʻololi o .modal-dialogmua o ke ʻano fade-in animation, ʻo ka $modal-show-transformmea hoʻololi e hoʻoholo i ka hoʻololi ʻana o .modal-dialogma ka hope o ke ʻano fade-in animation.

Inā makemake ʻoe i kahi animation zoom-in, hiki iā ʻoe ke hoʻonohonoho $modal-fade-transform: scale(.8).

Wehe i ka animation

No nā mods i ʻike wale ʻia ma mua o ka nalo ʻana e nānā, e wehe i ka .fadepapa mai kāu markup modal.

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

Nā kiʻekiʻe kiʻekiʻe

Inā hoʻololi ke kiʻekiʻe o kahi modal i ka wā e wehe ʻia ai, pono ʻoe e kelepona $('#myModal').modal('handleUpdate')e hoʻoponopono hou i ke kūlana o ka modal inā ʻike ʻia kahi scrollbar.

Hiki ke komo

E hōʻoia e hoʻohui aria-labelledby="...", e kuhikuhi ana i ke poʻo inoa modal, i .modal. Eia hou, hiki iā ʻoe ke hāʻawi i kahi wehewehe o kāu kamaʻilio modal me aria-describedbyon .modal. E hoʻomaopopo ʻaʻole pono ʻoe e hoʻohui role="dialog"no ka mea ua hoʻohui mākou iā ia ma o JavaScript.

Hoʻokomo i nā wikiō YouTube

ʻO ka hoʻokomo ʻana i nā wikiō YouTube ma nā modals e pono ai ka JavaScript hou ʻaʻole i Bootstrap e hoʻōki maʻalahi i ka pāʻani a ʻoi aku. E ʻike i kēia pou Stack Overflow kōkua no ka ʻike hou aku.

Nā nui koho

Loaʻa i nā ʻano nui ʻekolu koho, loaʻa ma o nā papa hoʻololi e kau ʻia ma kahi .modal-dialog. Hoʻokomo ʻia kēia mau nui i kekahi mau wahi haʻihaʻi e pale aku i nā scrollbar ākea ma nā wahi ʻike haiki.

Nui	Papa	Modal max-ākea
Liʻiliʻi	`.modal-sm`	`300px`
Default	ʻAʻohe	`500px`
Nui	`.modal-lg`	`800px`
Nui loa	`.modal-xl`	`1140px`

ʻO kā mākou modal paʻamau me ka papa hoʻololi ʻole ʻo ia ka "medium" size modal.

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

Hoʻohana

Hoʻololi ka mod plugin i kāu ʻike huna ma ke koi, ma o nā hiʻohiʻona ʻikepili a i ʻole JavaScript. Hoʻohui pū ia .modal-openi ka <body>e override default scrolling behavior a hana i kahi .modal-backdrope hāʻawi i kahi kaomi no ka hoʻokuʻu ʻana i nā modals i hōʻike ʻia ke kaomi ʻana ma waho o ka modal.

Ma o nā hiʻohiʻona ʻikepili

E ho'ā i kahi modal me ke kākau ʻole i ka JavaScript. Hoʻonoho ʻia data-toggle="modal"ma kahi mea hoʻoponopono, e like me ke pihi, me kahi data-target="#foo"a href="#foo"i ʻole e kuhikuhi i kahi ʻano kikoʻī e hoʻololi.

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

Ma o JavaScript

Kāhea i kahi modal me ka id myModalme kahi laina o JavaScript:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-backdrop="".

inoa	ʻAno	Default	wehewehe
kāʻei kua	boolean a i ʻole ke kaula`'static'`	ʻoiaʻiʻo	Loaʻa i kahi ʻāpana modal-backdrop. ʻO kahi ʻē aʻe, e kuhikuhi `static`i kahi backdrop ʻaʻole i pani i ka modal ma ke kaomi.
keyboard	boolean	ʻoiaʻiʻo	Pani i ka modal ke kaomi ʻia ke kī pakele
kālele	boolean	ʻoiaʻiʻo	Kau i ka manaʻo i ka modal i ka wā i hoʻomaka ai.
hōʻike	boolean	ʻoiaʻiʻo	Hōʻike i ka modal i ka wā i hoʻomaka ai.

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

`.modal(options)`

Ho'ā i kāu ʻike ma ke ʻano he modal. ʻAe i kahi koho koho object.

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

`.modal('toggle')`

Hoʻololi lima i kahi ʻano. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia ke modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.modala i ʻole).hidden.bs.modal

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

`.modal('show')`

Wehe lima ʻia kahi modal. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.modalhanana).

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

`.modal('hide')`

Hūnā lima ʻia kahi ʻano. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.modalhanana).

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

`.modal('handleUpdate')`

Hoʻoponopono lima lima i ke kūlana o ke ʻano inā hoʻololi ke kiʻekiʻe o ke ʻano i ka wā e wehe ʻia ana (ʻo ia hoʻi, inā ʻike ʻia kahi scrollbar).

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

`.modal('dispose')`

Hoʻopau i ke ʻano o kekahi mea.

Nā hanana

Hōʻike ka papa modal Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana modal. Hoʻopau ʻia nā hanana modal āpau ma ka modal ponoʻī (ʻo ia ma ka <div class="modal">).

ʻAno Hanana	wehewehe
hōʻike.bs.modal	Hoʻomaka koke kēia hanana i ke `show`kāhea ʻia ʻana o ke ʻano hana. Inā hoʻokumu ʻia e kahi kaomi, loaʻa ka mea kaomi ma ke ʻano he `relatedTarget`waiwai o ka hanana.
hōʻike.bs.modal	Hoʻopau ʻia kēia hanana ke ʻike ʻia ka modal e ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS). Inā hoʻokumu ʻia e kahi kaomi, loaʻa ka mea kaomi ma ke ʻano he `relatedTarget`waiwai o ka hanana.
huna.bs.modal	Hoʻopau koke ʻia kēia hanana i ka wā `hide`i kāhea ʻia ai ke ʻano hana.
huna.bs.modal	Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka modal mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hidePrevented.bs.modal	Hoʻopau ʻia kēia hanana i ka wā e hōʻike ʻia ai ka modal, ʻo kona kua `static`a me kahi kaomi ma waho o ka modal a i ʻole ke kī kī pakele e hana ʻia me ke koho keyboard a `data-keyboard`hoʻonohonoho ʻia i `false`.

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