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 byggð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')
})

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>

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>

Lóðrétt miðju

Bættu .modal-dialog-centeredvið til .modal-dialogað miðja mótalinn 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ólaábendingum 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>

Mismunandi efnisform

Ertu með fullt af hnöppum sem kveikja allir á sama forminu 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)
})

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 stöðu mótalsins ef skrunstikan birtist.

Aðgengi

Vertu viss um að bæta við role="dialog"og aria-labelledby="...", með vísan í 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 tvær valfrjálsar stærðir, fáanlegar í gegnum breytingaflokka til að setja á .modal-dialog. Þessar stærðir koma inn á ákveðnum brotstöðum til að forðast láréttar skrunstikur á þrengri útsýnisgluggum.

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

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 staticfyrir bakgrunn sem lokar ekki forminu þegar smellt er.
lyklaborð Boolean satt Lokar forminu þegar ýtt er á escape takkann
fókus Boolean satt Setur fókusinn á formið þ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ótaviðburðum er skotið á mótalann sjálfan (þ.e. á <div class="modal">).

Tegund atburðar Lýsing
show.bs.modal Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð. Ef smellt er af völdum er smellt þáttur tiltækur sem relatedTargeteign 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 relatedTargeteign atburðarins.
hide.bs.modal Þessi atburður er ræstur strax þegar hidetilviksað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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})