Fara í aðalefni Farðu í skjalaleiðsögn
in English

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.

Á þessari síðu

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:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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ð.

Formal titill

Líkamstexti fer hér.

<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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.

Þú 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.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Lóðrétt miðju

Bættu .modal-dialog-centeredvið til .modal-dialogað miðja mótalinn lóðrétt.

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

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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-*eiginleika 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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Skiptu á milli tegunda

Skiptu á milli margra aðferða með snjöllri staðsetningu á data-bs-targetog eigindunum data-bs-toggle. Til dæmis gætirðu skipt um endurstillingu lykilorðs innan úr þegar opnu innskráningarformi. Vinsamlegast athugaðu að ekki er hægt að opna margar gerðir á sama tíma - þessi aðferð skiptir einfaldlega á milli tveggja aðskildra aðferða.

Opið fyrsta form 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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áttarhreyfingu 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" 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.handleUpdate()til að endurstilla stöðu mótalsins ef skrunstikan birtist.

Aðgengi

Vertu viss um að bæta við aria-labelledby="...", með vísan til formúlunnar, við .modal. Að auki geturðu gefið lýsingu á valmyndinni þinni með aria-describedbyá .modal. Athugaðu að þú þarft ekki að bæta role="dialog"því við þar sem við bætum því nú þegar við með JavaScript.

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ðnum brotstöðum 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.

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

Fullskjár Modal

Önnur hnekkja er möguleikinn á að skjóta upp sniði sem nær yfir notendaútlitið, fáanlegt í gegnum breytingaflokka sem eru settir á .modal-dialog.

bekk Framboð
.modal-fullscreen Alltaf
.modal-fullscreen-sm-down Fyrir neðan576px
.modal-fullscreen-md-down Fyrir neðan768px
.modal-fullscreen-lg-down Fyrir neðan992px
.modal-fullscreen-xl-down Fyrir neðan1200px
.modal-fullscreen-xxl-down Fyrir neðan1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Breytur

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Lykkju

Móttækir gerðir á öllum skjánum eru búnar til með $breakpointskortinu og lykkju í scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Notkun

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

Í gegnum gagnaeiginleika

Skipta

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

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

Segja frá

Hægt er að fá brottvísun með dataeigindinni á hnappi innan formsins eins og sýnt er hér að neðan:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

eða á hnapp fyrir utan aðferðina með því að nota data-bs-targeteins og sýnt er hér að neðan:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Þó að báðar leiðir til að hafna aðferð séu studdar, hafðu í huga að það að hafna utan aðferðar passar ekki við hönnunarmynstur WAI-ARIA aðferðarglugga . Gerðu þetta á eigin ábyrgð.

Með JavaScript

Búðu til form með einni línu af JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Valmöguleikar

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

Nafn Tegund Sjálfgefið Lýsing
backdrop Boolean eða strengurinn'static' true Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu staticfyrir bakgrunn sem lokar ekki forminu þegar smellt er.
keyboard Boolean true Lokar forminu þegar ýtt er á escape takkann
focus Boolean true Setur fókusinn á formið þegar það er frumstillt.

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 .

Framhjávalkostir

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

skipta

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.toggle()

sýna

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.show()

Einnig er hægt að senda DOM frumefni sem rök sem hægt er að taka á móti í formlegum atburðum (sem relatedTargeteign).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

fela sig

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.hide()

handleUpdate

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

myModal.handleUpdate()

farga

Eyðileggur form frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)

myModal.dispose()

getTilvik

Static aðferð sem gerir þér kleift að fá modal tilvikið tengt DOM frumefni

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Statísk aðferð sem gerir þér kleift að fá modal tilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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 viðburð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.
shown.bs.modal Þ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).
hidePrevented.bs.modal Þessi atburður er ræstur þegar aðferðin er sýnd, bakgrunnur hennar er staticog smellur fyrir utan aðferðina eða ýtt á escape takka er framkvæmd með lyklaborðsvalkostinum eða data-bs-keyboardstillt á false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})