in English

Modaal

Gebruik de modale JavaScript-plug-in van Bootstrap om dialoogvensters aan uw site toe te voegen voor lightboxes, gebruikersmeldingen of volledig aangepaste inhoud.

Hoe het werkt

Voordat u aan de slag gaat met de modale component van Bootstrap, moet u het volgende lezen, aangezien onze menu-opties onlangs zijn gewijzigd.

Modals zijn gebouwd met HTML, CSS en JavaScript. Ze worden over al het andere in het document gepositioneerd en verwijderen scroll uit de <body>zodat in plaats daarvan modale inhoud schuift.
Als u op de modale "achtergrond" klikt, wordt de modal automatisch gesloten.
Bootstrap ondersteunt slechts één modaal venster tegelijk. Geneste modaliteiten worden niet ondersteund omdat we denken dat dit een slechte gebruikerservaring is.
Modals gebruiken position: fixed, wat soms een beetje bijzonder kan zijn over de weergave ervan. Plaats waar mogelijk uw modale HTML op een positie op het hoogste niveau om mogelijke interferentie van andere elementen te voorkomen. U zult waarschijnlijk problemen tegenkomen bij het nesten van een .modalin een ander vast element.
Nogmaals, vanwege position: fixed, zijn er enkele kanttekeningen bij het gebruik van modals op mobiele apparaten. Zie onze browserondersteuningsdocumenten voor details.
Vanwege de manier waarop HTML5 de semantiek definieert, heeft het autofocusHTML-attribuut geen effect in Bootstrap-modaliteiten. Gebruik wat aangepast JavaScript om hetzelfde effect te bereiken:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. Zie het gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .

Blijf lezen voor demo's en gebruiksrichtlijnen.

Voorbeelden

Hieronder staat een statisch modaal voorbeeld (wat betekent dat het is positionen displayis overschreven). Inbegrepen zijn de modale koptekst, modale hoofdtekst (vereist voor padding) en modale voettekst (optioneel). We vragen u waar mogelijk modale koppen met afwijzingsacties op te nemen, of een andere expliciete afwijzingsactie op te geven.

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

Schakel een werkende modale demo in door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.

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

Statische achtergrond

Als de achtergrond is ingesteld op statisch, wordt de modal niet gesloten als er buiten wordt geklikt. Klik op de onderstaande knop om het te proberen.

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

Door lange inhoud scrollen

Wanneer modals te lang worden voor de viewport of het apparaat van de gebruiker, scrollen ze onafhankelijk van de pagina zelf. Probeer de demo hieronder om te zien wat we bedoelen.

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.

U kunt ook een schuifbare modal maken waarmee u door de modale body kunt scrollen door toe te voegen .modal-dialog-scrollableaan .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>

Verticaal gecentreerd

Toevoegen .modal-dialog-centeredaan .modal-dialogom de modal verticaal te centreren.

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

Knopinfo en popovers

Tooltips en popovers kunnen naar behoefte in modals worden geplaatst. Wanneer modals zijn gesloten, worden alle tooltips en popovers binnen ook automatisch gesloten.

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

Het raster gebruiken

Gebruik het Bootstrap-rastersysteem binnen een modaal door te nesten .container-fluidin het .modal-body. Gebruik dan de normale rastersysteemklassen zoals u dat ergens anders zou doen.

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

Heb je een aantal knoppen die allemaal hetzelfde modaal activeren met een iets andere inhoud? Gebruik event.relatedTargeten HTML- data-*attributen (mogelijk via jQuery ) om de inhoud van de modal te variëren, afhankelijk van op welke knop is geklikt.

Hieronder vindt u een live demo gevolgd door voorbeeld HTML en JavaScript. Lees voor meer informatie de documenten over modale gebeurtenissen voor meer informatie over 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)
})

Animatie wijzigen

De $modal-fade-transformvariabele bepaalt de transformatiestatus van .modal-dialogvóór de modale fade-in-animatie, de $modal-show-transformvariabele bepaalt de transformatie van .modal-dialogaan het einde van de modale fade-in-animatie.

Als u bijvoorbeeld een inzoomanimatie wilt, kunt u instellen $modal-fade-transform: scale(.8).

Animatie verwijderen

Voor modals die gewoon verschijnen in plaats van vervagen om te bekijken, verwijdert u de .fadeklasse uit uw modale opmaak.

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

Dynamische hoogten

Als de hoogte van een modal verandert terwijl deze open is, moet u bellen $('#myModal').modal('handleUpdate')om de positie van de modal opnieuw aan te passen voor het geval er een schuifbalk verschijnt.

Toegankelijkheid

Zorg ervoor dat u aria-labelledby="...", verwijzend naar de modale titel, toevoegt aan .modal. Bovendien kunt u een beschrijving van uw modale dialoog geven met aria-describedbyop .modal. Merk op dat u niets hoeft toe te voegen role="dialog", omdat we het al toevoegen via JavaScript.

YouTube-video's insluiten

Voor het insluiten van YouTube-video's in modals is extra JavaScript vereist dat niet in Bootstrap zit om het afspelen automatisch te stoppen en meer. Zie deze nuttige Stack Overflow-post voor meer informatie.

Optionele maten

Modals hebben drie optionele maten, beschikbaar via modificatieklassen die op een .modal-dialog. Deze formaten treden in werking bij bepaalde breekpunten om horizontale schuifbalken op smallere kijkvensters te vermijden.

Maat	Klas	Modale maximale breedte
Klein	`.modal-sm`	`300px`
Standaard	Geen	`500px`
Groot	`.modal-lg`	`800px`
Extra groot	`.modal-xl`	`1140px`

Onze standaard modale klasse zonder modificatie vormt de "middelgrote" modal.

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

Gebruik

De modale plug-in schakelt uw verborgen inhoud op aanvraag in, via gegevensattributen of JavaScript. Het voegt ook toe .modal-openaan het <body>standaard scrollgedrag om te negeren en genereert een .modal-backdropom een klikgebied te bieden voor het negeren van getoonde modals wanneer buiten het modale geklikt wordt.

Via gegevensattributen

Activeer een modaal zonder JavaScript te schrijven. Stel data-toggle="modal"in op een controller-element, zoals een knop, samen met een data-target="#foo"of href="#foo"om een specifieke modaal te targeten om te schakelen.

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

Via JavaScript

Roep een modaal met id myModalaan met een enkele regel JavaScript:

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

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-backdrop="".

Naam	Type	Standaard	Beschrijving
achtergrond	boolean of de string`'static'`	WAAR	Bevat een modaal-achtergrondelement. U kunt ook een achtergrond opgeven `static`die de modal niet sluit bij klikken.
toetsenbord	booleaans	WAAR	Sluit de modal wanneer de escape-toets wordt ingedrukt
focus	booleaans	WAAR	Legt de focus op het modale wanneer geïnitialiseerd.
show	booleaans	WAAR	Toont de modal wanneer geïnitialiseerd.

Methoden:

Asynchrone methoden en overgangen

Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .

Zie onze JavaScript-documentatie voor meer informatie .

`.modal(options)`

Activeert uw inhoud als modaal. Accepteert een optionele optie object.

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

`.modal('toggle')`

Schakelt handmatig een modaal in. Keert terug naar de beller voordat de modal daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.modalof hidden.bs.modal-gebeurtenis plaatsvindt).

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

`.modal('show')`

Opent handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond (dwz voordat de shown.bs.modalgebeurtenis plaatsvindt).

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

`.modal('hide')`

Verbergt handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is verborgen (dwz voordat de hidden.bs.modalgebeurtenis plaatsvindt).

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

`.modal('handleUpdate')`

Pas de positie van de modal handmatig aan als de hoogte van een modal verandert terwijl deze open is (dwz als er een schuifbalk verschijnt).

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

`.modal('dispose')`

Vernietigt de modal van een element.

Evenementen

De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit. Alle modale gebeurtenissen worden afgevuurd op de modale zelf (dwz op de <div class="modal">).

Evenementtype	Beschrijving
show.bs.modal	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `show`instantiemethode wordt aangeroepen. Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de `relatedTarget`eigenschap van de gebeurtenis.
getoond.bs.modal	Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de `relatedTarget`eigenschap van de gebeurtenis.
verberg.bs.modal	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `hide`instantiemethode is aangeroepen.
verborgen.bs.modal	Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
hidePrevented.bs.modal	Deze gebeurtenis wordt geactiveerd wanneer de modal wordt weergegeven, de achtergrond is `static`en een klik buiten de modal of een escape-toets wordt ingedrukt met de toetsenbordoptie of `data-keyboard`ingesteld op `false`.

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