Source

Módel

Notaðu Bootstrap's JavaScript modal viðbót til að bæta við gluggum á síðuna þína fyrir ljósakassa, notendatilkynningar eða algjörlega sérsniðið efni.

Hvernig það virkar

Áður en byrjað er með mótalhluta Bootstrap, vertu viss um að lesa eftirfarandi þar sem valmyndarvalkostirnir okkar hafa nýlega breyst.

Modals eru smíðaðir með HTML, CSS og JavaScript. Þeir eru staðsettir yfir öllu öðru í skjalinu og fjarlægja skrun úr skjalinu <body>þannig að formlegt efni flettir í staðinn.
Með því að smella á „bakgrunninn“ lokast aðferðinni sjálfkrafa.
Bootstrap styður aðeins einn modal glugga í einu. Hreiður form eru ekki studd þar sem við teljum að þau séu léleg notendaupplifun.
Modals nota position: fixed, sem getur stundum verið svolítið sérstakt varðandi flutning þess. Þegar mögulegt er skaltu setja HTML-sniðið þitt á efstu stigi til að forðast hugsanlega truflun frá öðrum þáttum. Þú munt líklega lenda í vandræðum þegar þú hreiður inn .modalí annan fastan þátt.
Enn og aftur, vegna position: fixed, eru nokkrir fyrirvarar við notkun aðferða í farsímum. Skoðaðu stuðningsskjöl vafrans okkar fyrir frekari upplýsingar.
Vegna þess hvernig HTML5 skilgreinir merkingarfræði sína, hefur autofocusHTML eigindin engin áhrif í Bootstrap aðferðum. Til að ná sömu áhrifum skaltu nota sérsniðið JavaScript:

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

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Haltu áfram að lesa fyrir kynningar og notkunarleiðbeiningar.

Dæmi

Hér að neðan er kyrrstætt dæmi (sem þýðir að það er positionog displayhefur verið hnekkt). Innifalið eru haus, módel meginmál (nauðsynlegt fyrir padding) og tegundarfótur (valfrjálst). Við biðjum þig um að láta hausa fylgja með frávísunaraðgerðum þegar mögulegt er, eða gefa upp aðra skýra frávísunaraðgerð.

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

Sýning í beinni

Skiptu um virka sýnikennslu með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.

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

Statískt bakgrunn

Þegar bakgrunnur er stilltur á kyrrstöðu, mun mótalinn ekki lokast þegar smellt er fyrir utan það. Smelltu á hnappinn hér að neðan til að prófa.

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

Fletta langt efni

Þegar snið verða of löng fyrir útsýnisgátt eða tæki notandans, fletta þau óháð síðunni sjálfri. Prófaðu kynninguna hér að neðan til að sjá hvað við meinum.

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

Þú getur líka búið til flettanlegt form sem gerir kleift að fletta meginmálinu með því að bæta .modal-dialog-scrollablevið .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>

Lóðrétt miðju

Bættu .modal-dialog-centeredvið til .modal-dialogað miðja aðferðina lóðrétt.

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

Verkfæraráð og popovers

Hægt er að setja verkfæraábendingar og popover innan forms eftir þörfum. Þegar aðferðum er lokað er öllum tólum og sprettigluggum innan þeirra einnig sjálfkrafa vísað frá.

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

Að nota ristina

Notaðu Bootstrap grid kerfið innan forms með því að hreiðra .container-fluidinnan .modal-body. Notaðu síðan venjulega kerfisflokkana eins og þú myndir gera annars staðar.

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

Ertu með fullt af hnöppum sem allir kalla fram sama form með aðeins mismunandi innihaldi? Notaðu event.relatedTargetog HTML data-*eiginleika (hugsanlega í gegnum jQuery ) til að breyta innihaldi formsins eftir því hvaða hnapp var smellt á.

Hér að neðan er lifandi kynning og fylgt eftir með HTML og JavaScript. Fyrir frekari upplýsingar, lestu skjölin fyrir modal events til að fá upplýsingar um 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)
})

Breyta hreyfimynd

Breytan $modal-fade-transformákvarðar umbreytingarástandið .modal-dialogáður en hlífðarmyndin fölnar inn, $modal-show-transformbreytan ákvarðar umbreytinguna á .modal-dialogí lok hlífðarfjörsins.

Ef þú vilt til dæmis aðdráttarafl geturðu stillt $modal-fade-transform: scale(.8).

Fjarlægðu hreyfimyndir

Fyrir snið sem einfaldlega birtast frekar en að hverfa inn til að skoða, fjarlægðu .fadeflokkinn úr aðferðamerkingunni þinni.

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

Dýnamískar hæðir

Ef hæð mótals breytist á meðan hann er opinn, ættir þú að hringja $('#myModal').modal('handleUpdate')til að endurstilla staðsetningu mótalsins ef skrunstikan birtist.

Aðgengi

Gakktu úr skugga um að þú bætir við role="dialog"og aria-labelledby="...", sem vísar í titil formsins, til .modal, og role="document"til .modal-dialogsjálfs. Að auki geturðu gefið lýsingu á valmyndinni þinni með aria-describedbyá .modal.

Fella inn YouTube myndbönd

Að fella inn YouTube myndbönd í modals krefst viðbótar JavaScript sem er ekki í Bootstrap til að stöðva spilun sjálfkrafa og fleira. Sjá þessa gagnlegu Stack Overflow færslu fyrir frekari upplýsingar.

Valfrjálsar stærðir

Modals hafa þrjár valfrjálsar stærðir, fáanlegar í gegnum breytingaflokka til að setja á .modal-dialog. Þessar stærðir koma inn á ákveðna brotpunkta til að forðast láréttar skrunstikur á þrengri útsýnisgluggum.

Stærð	bekk	Hámarksbreidd módel
Lítil	`.modal-sm`	`300px`
Sjálfgefið	Enginn	`500px`
Stórt	`.modal-lg`	`800px`
Auka stór	`.modal-xl`	`1140px`

Sjálfgefna aðferðin okkar án breytingaflokks er „miðlungs“ stærð aðferðarinnar.

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

Notkun

Modal viðbótin skiptir um falið efni eftir beiðni, með gagnaeiginleikum eða JavaScript. Það bætir einnig við .modal-openað <body>hnekkja sjálfgefnum skrunhegðun og býr .modal-backdroptil smellisvæði til að hafna sýndum aðferðum þegar smellt er utan aðferðarinnar.

Í gegnum gagnaeiginleika

Virkjaðu form án þess að skrifa JavaScript. Stillt data-toggle="modal"á stjórnunareiningu, eins og hnapp, ásamt a data-target="#foo"eða href="#foo"til að miða á ákveðna aðferð til að skipta.

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

Með JavaScript

Hringdu í modal með auðkenni myModalmeð einni línu af JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-backdrop="".

Nafn	Tegund	Sjálfgefið	Lýsing
bakgrunn	Boolean eða strengurinn`'static'`	satt	Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu `static`fyrir bakgrunn sem lokar ekki forminu með því að smella eða þegar ýtt er á escape takkann.
lyklaborð	Boolean	satt	Lokar forminu þegar ýtt er á escape takkann
fókus	Boolean	satt	Setur fókusinn á módelið þegar það er frumstillt.
sýna	Boolean	satt	Sýnir aðferðina þegar hann er frumstilltur.

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

`.modal(options)`

Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object.

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

`.modal('toggle')`

Skiptir handvirkt um form. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.modaleða hidden.bs.modalá sér stað).

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

`.modal('show')`

Opnar form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd (þ.e. áður en shown.bs.modalatburðurinn á sér stað).

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

`.modal('hide')`

Felur form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið falin (þ.e. áður en hidden.bs.modalatburðurinn á sér stað).

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

`.modal('handleUpdate')`

Stilltu handvirkt stöðu mótans ef hæð mótals breytist á meðan hann er opinn (þ.e. ef skrunstika birtist).

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

`.modal('dispose')`

Eyðileggur form frumefnis.

Viðburðir

Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni. Öllum mótunarviðburðum er skotið á mótalið sjálft (þ.e. á <div class="modal">).

Tegund viðburðar	Lýsing
show.bs.modal	Þetta atvik ræsir strax þegar `show`tilviksaðferðin er kölluð. Ef smellt er af völdum er smellt þáttur tiltækur sem `relatedTarget`eign atburðarins.
sýnd.bs.módel	Þessi atburður er ræstur þegar modal hefur verið gert sýnilegt notandanum (bíður eftir að CSS umbreytingum ljúki). Ef smellt er af völdum er smellt þáttur tiltækur sem `relatedTarget`eign atburðarins.
hide.bs.modal	Þessi atburður er ræstur strax þegar `hide`tilviksaðferðin hefur verið kölluð.
hidden.bs.modal	Þessi atburður er ræstur þegar aðferðin hefur lokið við að vera falin fyrir notandanum (mun bíða eftir að CSS umbreytingum ljúki).
hidePrevented.bs.modal	Þessi atburður er ræstur þegar aðferðin er sýnd, bakgrunnur hennar er `static`og smellt er fyrir utan aðferðina eða ýtt á escape takka.

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