Source

Modal

Whakamahia te monohiko 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.

Pehea te mahi

I mua i te tiimata me te waahanga tikanga 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 whakaatu 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" 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>

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

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.

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

Pokapū poutū

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

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

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

Te rereke i nga ihirangi aratau

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 tikanga 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 modal 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" 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)
})

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" role="dialog" 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 role="dialog"me aria-labelledby="..."te, tohutoro i te taitara aratau, ki te .modal, role="document"ki a .modal-dialogia ano. I tua atu, ka taea e koe te whakaatu i to korero korero mo aria-describedbyrunga i te .modal.

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 momo rahi "waenganui".

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

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 statiche 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')

Whakaritea-a-ringa te tuunga 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 showkarangahia te aratuka tauira. Mena na te paato i pa, ka waatea te huānga kua paatohia hei relatedTargettaonga 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 relatedTargettaonga mo te huihuinga.
huna.bs.modal Ka puhia tonutia tenei takahanga ina hidekua 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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})