Modal

Whakamahia te mono mono JavaScript a Bootstrap ki te taapiri i nga korero ki to papaanga mo nga pouaka rama, nga whakamohiotanga a nga kaiwhakamahi, me nga ihirangi tino ritenga ranei.

Me pehea te mahi

I mua i te tiimata me te waahanga modal a Bootstrap, kia mohio koe ki te panui i nga mea e whai ake nei na te mea kua huri nga whiringa tahua.

Ka hangaia nga tauira ki te HTML, CSS, me te JavaScript. Ka tuuhia ki runga ake i nga mea katoa o te tuhinga ka tango i te panuku mai i te pukapuka kia panuku te <body>ihirangi aratau.
Ma te panui i te "papamuri" ka kati aunoa i te ahua.
Ka tautokohia e Bootstrap tetahi matapihi aratau i ia wa. Kaore i te tautokohia nga tikanga kohanga na te mea e whakapono ana matou he ngoikore nga wheako kaiwhakamahi.
Ka whakamahia position: fixede nga tauira, he ahua motuhake mo tana whakaputanga. I nga wa katoa ka taea, tuuhia to HTML modal ki te taumata teitei kia kore ai e pokanoa mai i etahi atu huānga. Ka raru pea koe i te wa e kohanga ana .modali tetahi atu huānga kua whakaritea.
Ano ano, na te mea position: fixed, kei reira etahi whakatupato me te whakamahi i nga tikanga i runga i nga taputapu pūkoro. Tirohia a maatau tuhinga tautoko tirotiro mo nga taipitopito.
Na te ahua o te HTML5 e tautuhi ana i ona tohu, kaore he painga o te autofocushuanga HTML ki nga tikanga Bootstrap. Hei whakatutuki i taua paanga, whakamahia etahi ritenga JavaScript:

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

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Kia mau ki te panui mo nga whakaaturanga me nga aratohu whakamahi.

Tauira

Kei raro nei he tauira aratau patekoposition ( ko tona tikanga displaykua whakakorehia). Kei roto ko te pane aratau, te tinana aratau (e hiahiatia ana mo te padding), me te hiku aratau (he whiriwhiri). Ka tono matou kia whakaurua e koe nga pane aratau me nga mahi whakakore i nga wa katoa ka taea, me whakarato ranei i tetahi atu mahi whakakore.

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

Takahurihia he whakaaturanga aratau mahi ma te paatene i te paatene kei raro nei. Ka paheke ki raro ka memeha mai i te tihi o te wharangi.

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

Papamuri pateko

Ina tautuhia te papamuri ki te pateko, ka kore te aratau e kati ina paato ana ki waho. Patohia te paatene i raro nei hei whakamatau.

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

Te panuku i nga ihirangi roa

Ka roa rawa nga tikanga mo te tauranga tirohanga a te kaiwhakamahi, te taputapu ranei, ka panuku motuhake mai i te wharangi ake. Whakamātauria te demo i raro nei kia kite he aha te tikanga.

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.

Ka taea hoki e koe te hanga i tetahi aratau panuku ka taea te panuku i te tinana aratau ma te taapiri atu .modal-dialog-scrollableki te .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>

Pokapū poutū

Tāpirihia .modal-dialog-centeredki .modal-dialogte poutū poutū te tikanga.

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

Nga aki utauta me nga popovers

Ka taea te whakanoho i nga aki taputapu me nga pouvers ki roto i nga tikanga e hiahiatia ana. Ina katia nga tikanga, ka whakakorea aunoatia nga aki taputapu me nga popovers o roto.

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

Te whakamahi i te matiti

Whakamahia te punaha matiti Bootstrap i roto i te aratau ma te kohanga .container-fluidi roto i te .modal-body. Na, whakamahia nga karaehe punaha matiti noa penei i a koe ki hea atu.

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

He paihere o nga patene e whakaoho ana i te ahua kotahi me nga ihirangi paku rereke? Whakamahia event.relatedTargetme nga huanga HTMLdata-* ( ma te jQuery pea ) ki te whakarereke i nga ihirangi o te aratau i runga i te paatene i paatohia.

Kei raro ko te demo ora e whai ana i te tauira HTML me JavaScript. Mo etahi atu korero, panuihia nga tuhinga takahanga aratau mo nga taipitopito mo 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)
})

Huri hākoritanga

Ka $modal-fade-transformwhakatauhia e te taurangi te ahua o te huringa i .modal-dialogmua i te whakakorikori ahua memeha-i roto, ko te $modal-show-transformtaurangi ka whakatau i te huringa o .modal-dialogte mutunga o te hākoritanga memeha-i roto i te aratau.

Mena kei te pirangi koe hei tauira he hākoritanga topa-mai, ka taea e koe te whakarite $modal-fade-transform: scale(.8).

Tango hākoritanga

Mo nga tauira ka puta noa, kaua e memeha ki te tiro, tangohia te .fadekaraehe mai i to tohu tohu.

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

Te teitei hihiko

Mena ka huri te teitei o te aratau i te wa e tuwhera ana, me waea atu koe $('#myModal').modal('handleUpdate')ki te whakatika i te tuunga o te aratau mena ka puta he pae panuku.

Te urunga

Kia mahara ki te taapiri aria-labelledby="...", tohutoro i te taitara aratau, ki .modal. I tua atu, ka taea e koe te whakaatu i to korero korero mo aria-describedbyrunga i te .modal. Kia mahara kaore koe e hiahia ki te taapiri role="dialog"i te mea kua taapirihia e matou ma te JavaScript.

Te whakauru ataata YouTube

Ko te whakauru i nga riipene YouTube ki roto i nga tikanga ka hiahiatia he JavaScript taapiri kaore i Bootstrap hei aukati aunoa i te purei me etahi atu. Tirohia tenei panui Stack Overflow mo etahi atu korero.

Rahi whiriwhiri

E toru nga rahi o nga tauira, e waatea ana ma nga karaehe whakarereke hei whakanoho ki runga i te .modal-dialog. Ka whana enei rahi ki etahi waahi pakaru hei karo i nga pae panuku whakapae i runga i nga tauranga whaiti.

Rahi	Karaehe	Modal max-whanui
Iti	`.modal-sm`	`300px`
Taunoa	Karekau	`500px`
Nui	`.modal-lg`	`800px`
Nui atu	`.modal-xl`	`1140px`

Ko ta maatau aratau taunoa kaore he karaehe whakarereke ko te momo ahua "waenganui".

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

Whakamahinga

Ko te mono mono ka huri i to ihirangi huna i runga i te tono, ma nga huanga raraunga, JavaScript ranei. Ka taapiri atu ano .modal-openki te <body>ki te whakakore i te whanonga panuku taunoa me te whakaputa .modal-backdropi tetahi waahi paatoo mo te whakakore i nga tikanga kua whakaatuhia ina paato i waho o te aratau.

Ma nga huanga raraunga

Whakahohehia he tikanga me te kore e tuhi JavaScript. Whakatakotoria data-toggle="modal"ki runga i te huānga mana whakahaere, penei i te paatene, me te, ki te whai data-target="#foo"ranei href="#foo"i tetahi aratau motuhake hei takahuri.

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

Ma te JavaScript

Karangahia he tikanga me te id myModalme te rarangi kotahi o JavaScript:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-backdrop="".

Ingoa	Momo	Taunoa	Whakaahuatanga
papamuri	boolean te aho ranei`'static'`	pono	Kei roto he huānga tauira-papamuri. Arā, whakawhāitihia `static`he papamuri e kore e kati i te aratau i runga i te paatene.
papapātuhi	boolean	pono	Ka kati i te aratau ina pehia te ki mawhiti
arotahi	boolean	pono	Ka tuu te aro ki te aratau ina arawhiti.
whakaatu	boolean	pono	Ka whakaatu i te aratau ina arawhiti.

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

`.modal(options)`

Whakahohehia to ihirangi hei aratau. Ka whakaae ki nga whiringa whiriwhiri object.

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

`.modal('toggle')`

Ka takahuri-a-ringa i te tikanga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i te hunanga ranei o te aratau (arā, i mua i te puta o shown.bs.modalte hidden.bs.modaltakahanga).

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

`.modal('show')`

Ka whakatuwhera a-ringa i te tikanga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te tikanga (ara i mua i te shown.bs.modalputa o te takahanga).

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

`.modal('hide')`

Ka huna a-ringa i tetahi tikanga. Ka hoki ki te kaiwaea i mua i te hunanga o te tikanga (ara i mua i te hidden.bs.modalputa o te takahanga).

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

`.modal('handleUpdate')`

Whakatikatika ā-ringa i te tūnga o te aratau mena ka huri te teitei o te aratau i te wa e tuwhera ana (arā, mena ka puta he pae panuku).

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

`.modal('dispose')`

Ka whakakore i te ahua o te huānga.

Nga huihuinga

Ko te karaehe aratau a Bootstrap e whakaatu ana i etahi huihuinga mo te hono atu ki nga mahi tikanga. Ko nga huihuinga aratau katoa ka puhia ki te aratau ake (arā, i te <div class="modal">).

Momo Takahanga	Whakaahuatanga
show.bs.modal	Ka pupuhi tenei takahanga ina ka `show`karangahia te aratuka tauira. Mena na te paato i pa, ka waatea te huānga kua paatohia hei `relatedTarget`taonga mo te huihuinga.
whakaaturia.bs.modal	Ka pupuhihia tenei takahanga i te wa i kitea ai te ahua ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). Mena na te paato i pa, ka waatea te huānga kua paatohia hei `relatedTarget`taonga mo te huihuinga.
huna.bs.modal	Ka puhia tonutia tenei takahanga ina `hide`kua karangahia te aratuka tauira.
huna.bs.modal	Ka pupuhihia tenei takahanga ina mutu te hunanga o te tikanga mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
hidePrevented.bs.modal	Ka pupuhihia tenei takahanga ina whakaatu ana te aratau, ko tona papamuri ka paato `static`i waho o te aratau, ka mahia ranei te perehi mawhiti me te kowhiringa papapātuhi, `data-keyboard`ka tautuhia ranei ki `false`.

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