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.

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">
  <div class="modal-dialog">
    <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" 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="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" data-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="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.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

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

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

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.
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 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-keyboard`ynsteld op `false`.

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