Source

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

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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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.

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

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.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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ūwaena kū pololei

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

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

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" role="dialog" 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 ʻoluʻolu e hoʻohui role="dialog"a aria-labelledby="...", e kuhikuhi ana i ke poʻo inoa modal, iā .modal, a role="document"iā .modal-dialogia iho. Eia hou, hiki iā ʻoe ke hāʻawi i kahi wehewehe o kāu kamaʻilio modal me aria-describedbyon .modal.

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.

<!-- 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" role="document">
    <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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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 pani i ka modal ma ke kaomi ʻana a i ʻole ma ke kī kī pakele.
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 paʻi kī pakele.

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