Source

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.

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:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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" 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>

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

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

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.

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

Jo kinne ek in scrollbere modal meitsje wêrmei it modale lichem kin rôlje troch ta te foegjen .modal-dialog-scrollableoan .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>

Fertikaal sintraal

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

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

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

Hawwe jo in boskje knoppen dy't allegear deselde modale mei in bytsje ferskillende ynhâld trigger? Brûk event.relatedTargeten HTML data-*attributen (mooglik fia jQuery ) foar in fariearje de ynhâld fan de modale ô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-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)
})

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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dynamyske hichten

As de hichte fan in modal feroaret wylst it iepen is, moatte jo skilje $('#myModal').modal('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 role="dialog"en aria-labelledby="...", ferwizend nei de modale titel, nei .modal, en role="document"nei it .modal-dialogsels. Derneist kinne jo in beskriuwing jaan fan jo modale dialooch mei aria-describedbyop .modal.

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.

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

Gebrûk

De modale plugin skeakelet jo ferburgen ynhâld op oanfraach, fia gegevensattributen of JavaScript. It foeget ek ta .modal-openoan it <body>te oerskriuwen standert rôlje gedrach en genereart in .modal-backdropfoar in foarsjen in klik gebiet foar it ôfwizen fan sjen litten modals as jo klikke bûten de modale.

Fia data attributen

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

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

Fia JavaScript

Rop in modaal mei id myModalmei ien line fan JavaScript:

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

Opsjes

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

Namme	Type	Standert	Beskriuwing
eftergrûn	boolean of de snaar`'static'`	wier	Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje `static`foar in eftergrûn dy't de modaal net slút by klik of op escape-toetsdruk.
toetseboerd	boolean	wier	Slút de modale as escape-toets wurdt yndrukt
fokus	boolean	wier	Pleatst de fokus op 'e modale as inisjalisearre.
sjen litte	boolean	wier	Toant de modal 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 .

`.modal(options)`

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

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

`.modal('toggle')`

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

`.modal('show')`

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

`.modal('hide')`

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

`.modal('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').modal('handleUpdate')

`.modal('dispose')`

Ferneatiget in elemint syn modal.

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 evenemint wurdt ûntslein as de modale wurdt werjûn, de eftergrûn is `static`en in klik bûten de modale of in escape-toetsdruk wurdt útfierd.

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