in English

Modal

Brûk Bootstrap's JavaScript modale plugin om dialogen oan jo side ta te foegjen foar ljochtboxen, notifikaasjes fan brûkers, of folslein oanpaste ynhâld.

Op dizze side

Hoe't it wurket

Foardat jo begjinne mei de modale komponint fan Bootstrap, wês wis dat jo it folgjende lêze, om't ús menu-opsjes koartlyn binne feroare.

Modals binne boud mei HTML, CSS, en JavaScript. Se wurde oer al it oare yn it dokumint pleatst en scroll fuortsmite fan 'e <body>, sadat modale ynhâld ynstee rôlet.
Klikje op de modale "eftergrûn" sil de modale automatysk slute.
Bootstrap stipet mar ien modaal finster tagelyk. Nested modals wurde net stipe, om't wy leauwe dat se minne brûkersûnderfiningen binne.
Modalen brûke position: fixed, wat soms in bytsje spesifyk kin wêze oer syn rendering. As it mooglik is, pleats jo modale HTML op in top-nivo posysje om potinsjele ynterferinsje fan oare eleminten te foarkommen. Jo sille wierskynlik problemen tsjinkomme as jo in .modalbinnen in oar fêst elemint nestelje.
Nochris, fanwegen position: fixed, binne d'r wat behertigingen mei it brûken fan modalen op mobile apparaten. Sjoch ús browser-stipedokuminten foar details.
Troch hoe't HTML5 syn semantyk definiearret, hat it autofocusHTML-attribút gjin effekt yn Bootstrap-modalen. Om itselde effekt te berikken, brûk wat oanpast JavaScript:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Bliuw lêze foar demo's en gebrûksrjochtlinen.

Foarbylden

Hjirûnder is in statysk modaal foarbyld (betsjuttend syn positionen displaybinne oerskreaun). Ynbegrepen binne de modale koptekst, modale lichem (fereaske foar padding), en modale fuottekst (opsjoneel). Wy freegje dat jo, wannear mooglik, modale kopteksten opnimme mei ûntslachaksjes, of in oare eksplisite ûntslachaksje leverje.

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

Live demo

Skeakelje in wurkjende modale demo troch te klikken op de knop hjirûnder. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

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

Statyske eftergrûn

As eftergrûn is ynsteld op statysk, sil de modale net slute as jo der bûten klikke. Klikje op de knop hjirûnder om it te besykjen.

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

Scrolling lange ynhâld

As modalen te lang wurde foar de viewport of apparaat fan de brûker, rôlje se ûnôfhinklik fan 'e side sels. Besykje de demo hjirûnder om te sjen wat wy bedoele.

Jo kinne ek in scrollbere modal meitsje wêrmei it modale lichem kin rôlje troch ta te foegjen .modal-dialog-scrollableoan .modal-dialog.

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

Fertikaal sintraal

Taheakje .modal-dialog-centeredoan .modal-dialogom de modaal fertikaal te sintrum.

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

Tooltips en popovers

Tooltips en popovers kinne wurde pleatst binnen modals as nedich. As modalen binne sletten, wurde alle tooltips en popovers binnen ek automatysk wegere.

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

Mei help fan it raster

Brûk it Bootstrap-rastersysteem binnen in modaal troch nêst .container-fluidbinnen de .modal-body. Brûk dan de normale rastersysteemklassen lykas jo earne oars soene.

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

Hawwe jo in boskje knoppen dy't allegear deselde modale mei in bytsje ferskillende ynhâld trigger? Brûk event.relatedTargeten HTML- data-bs-*attributen om de ynhâld fan 'e modale te feroarjen ôfhinklik fan hokker knop waard oanklikt.

Hjirûnder is in live demo folge troch foarbyld HTML en JavaScript. Foar mear ynformaasje, lês de modale eveneminten docs foar details oer 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
})

Skeakelje tusken modalen

Skeakelje tusken meardere modals mei wat tûke pleatsing fan de data-bs-targeten data-bs-toggleattributen. Jo kinne bygelyks in modal foar reset fan wachtwurd wikselje fanút in al iepen oanmeldmodaal. Tink derom dat meardere modalen net tagelyk iepen kinne wêze - dizze metoade skeakelt gewoan tusken twa aparte modalen.

Iepenje earste modal

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

Feroarje animaasje

De $modal-fade-transformfariabele bepaalt de transformaasjetastân fan .modal-dialogfoar de modale fade-in-animaasje, de $modal-show-transformfariabele bepaalt de transformaasje fan .modal-dialogoan 'e ein fan' e modale fade-in-animaasje.

As jo bygelyks in ynzoomen-animaasje wolle, kinne jo ynstelle $modal-fade-transform: scale(.8).

Fuortsmite animaasje

Foar modalen dy't gewoan ferskine ynstee fan ferdwine om te besjen, ferwiderje de .fadeklasse fan jo modale markup.

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

Dynamyske hichten

As de hichte fan in modal feroaret wylst it iepen is, moatte jo skilje myModal.handleUpdate()om de posysje fan 'e modal opnij oan te passen foar it gefal dat in skúfbalke ferskynt.

Tagonklikheid

Wês wis dat jo tafoegje aria-labelledby="...", ferwizend nei de modale titel, oan .modal. Derneist kinne jo in beskriuwing jaan fan jo modale dialooch mei aria-describedbyop .modal. Tink derom dat jo it net hoege ta te foegjen role="dialog", om't wy it al tafoegje fia JavaScript.

Ynbêde YouTube-fideo's

Ynbêde fan YouTube-fideo's yn modalen fereasket ekstra JavaScript net yn Bootstrap om automatysk ôfspieljen en mear te stopjen. Sjoch dizze nuttige Stack Overflow-post foar mear ynformaasje.

Opsjonele maten

Modals hawwe trije opsjoneel maten, beskikber fia modifier klassen wurde pleatst op in .modal-dialog. Dizze maten stappe yn by bepaalde brekpunten om horizontale rôlbalken op smellere werjefteporten te foarkommen.

Grutte	Klasse	Modale maksimale breedte
Lyts	`.modal-sm`	`300px`
Standert	Gjin	`500px`
Grut	`.modal-lg`	`800px`
Ekstra grut	`.modal-xl`	`1140px`

Us standert modale sûnder modifikaasjeklasse foarmet de "medium" grutte modal.

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

In oare oerskriuwing is de opsje om in modaal op te popjen dy't de brûker viewport beslacht, beskikber fia modifierklassen dy't pleatst wurde op in .modal-dialog.

Klasse	Beskikberens
`.modal-fullscreen`	Altyd
`.modal-fullscreen-sm-down`	Ûnder`576px`
`.modal-fullscreen-md-down`	Ûnder`768px`
`.modal-fullscreen-lg-down`	Ûnder`992px`
`.modal-fullscreen-xl-down`	Ûnder`1200px`
`.modal-fullscreen-xxl-down`	Ûnder`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Fariabelen

$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);

Loop

Responsive modals op folslein skerm wurde generearre fia de $breakpointskaart en in loop yn 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);
      }
    }
  }
}

Gebrûk

De modale plugin skeakelet jo ferburgen ynhâld op oanfraach, fia gegevensattributen of JavaScript. It oerskriuwt ek standert rôljegedrach en genereart in .modal-backdropom in klikgebiet te jaan foar it ôfwizen fan sjen litten modalen as jo bûten de modale klikke.

Fia data attributen

Toggle

Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-bs-toggle="modal"op in controller-elemint, lykas in knop, tegearre mei in data-bs-target="#foo"of href="#foo"om in spesifike modaal te rjochtsjen om te wikseljen.

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

ôfwize

Untslach kin berikt wurde mei it dataattribút op in knop binnen de modale lykas hjirûnder oantoand:

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

of op in knop bûten de modal mei de data-bs-targetlykas hjirûnder oanjûn:

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

Wylst beide manieren om in modaal te ûntslaan wurde stipe, hâld der yn gedachten dat it ûntslaan fan bûten in modal net oerienkomt mei it ûntwerppatroan fan WAI-ARIA modale dialoochfinster . Doch dit op jo eigen risiko.

Fia JavaScript

Meitsje in modal mei ien line fan JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-backdrop="".

Namme	Type	Standert	Beskriuwing
`backdrop`	boolean of de snaar`'static'`	`true`	Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje `static`foar in eftergrûn dy't de modaal net slút by klik.
`keyboard`	boolean	`true`	Slút de modale as escape-toets wurdt yndrukt
`focus`	boolean	`true`	Pleatst de fokus op 'e modale as inisjalisearre.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Passing opsjes

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

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

wikselje

Wizigje manuell in modaal. Keart werom nei de beller foardat de modal feitlik werjûn of ferburgen is (dat wol sizze foardat it shown.bs.modalof hidden.bs.modalbarren bart).

myModal.toggle()

sjen litte

Iepenet in modaal mei de hân. Keart werom nei de beller foardat de modal wirklik werjûn is (dus foardat it shown.bs.modalevenemint bart).

myModal.show()

Jo kinne ek in DOM-elemint trochjaan as in argumint dat kin wurde ûntfongen yn 'e modale eveneminten (as it relatedTargeteigendom).

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

ferstopje

Ferberget in modaal mei de hân. Keart werom nei de beller foardat de modal eins ferburgen is (dus foardat it hidden.bs.modalbarren bart).

myModal.hide()

handleUpdate

Pas de posysje fan 'e modal mei de hân oan as de hichte fan in modal feroaret wylst it iepen is (dus yn it gefal dat in rôlbalke ferskynt).

myModal.handleUpdate()

disponearje

Ferneatiget in elemint syn modal. (Ferwidert bewarre gegevens op it DOM-elemint)

myModal.dispose()

getInstance

Statyske metoade wêrmei jo de modale eksimplaar kinne krije ferbûn mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de modale eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nije oanmeitsje foar it gefal dat it net inisjalisearre is

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

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit. Alle modale eveneminten wurde ûntslein op 'e modal sels (dus by de <div class="modal">).

Event type	Beskriuwing
`show.bs.modal`	Dit evenemint fjoer fuortendaliks as de `show`eksimplaar metoade wurdt oanroppen. As feroarsake troch in klik, is it oanklikte elemint beskikber as `relatedTarget`eigendom fan it evenemint.
`shown.bs.modal`	Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). As feroarsake troch in klik, is it oanklikte elemint beskikber as `relatedTarget`eigendom fan it evenemint.
`hide.bs.modal`	Dit barren wurdt fuortendaliks ûntslein as de `hide`eksimplaarmetoade oanroppen is.
`hidden.bs.modal`	Dit evenemint wurdt ûntslein as de modal klear is mei ferburgen te wurden foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
`hidePrevented.bs.modal`	Dit barren wurdt ûntslein as de modaal wurdt toand, de eftergrûn is `static`en in klik bûten de modale of in escape-toetsdruk wurdt útfierd mei de toetseboerdopsje of `data-bs-keyboard`ynsteld op `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})