Modaal

Gebruik Bootstrap se JavaScript-modale inprop om dialoogvensters by jou werf te voeg vir ligbokse, gebruikerskennisgewings of heeltemal pasgemaakte inhoud.

Hoe dit werk

Voordat u met Bootstrap se modale komponent begin, moet u die volgende lees aangesien ons spyskaartopsies onlangs verander het.

Modale word gebou met HTML, CSS en JavaScript. Hulle is oor alles anders in die dokument geposisioneer en verwyder rol van die <body>sodat modale inhoud eerder blaai.
Deur op die modale "agtergrond" te klik, sal die modale outomaties toemaak.
Bootstrap ondersteun slegs een modale venster op 'n slag. Geneste modale word nie ondersteun nie, aangesien ons glo dat dit swak gebruikerservarings is.
Modale gebruik position: fixed, wat soms 'n bietjie spesifiek kan wees oor die weergawe daarvan. Waar moontlik, plaas jou modale HTML in 'n topvlak posisie om moontlike inmenging van ander elemente te vermy. U sal waarskynlik probleme ondervind wanneer u 'n .modalbinne 'n ander vaste element nesmaak.
Weereens, as gevolg van position: fixed, is daar 'n paar waarskuwings met die gebruik van modale op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede.
As gevolg van hoe HTML5 sy semantiek definieer, het die autofocusHTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:

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

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Hou aan lees vir demonstrasies en gebruiksriglyne.

Voorbeelde

Hieronder is 'n statiese modale voorbeeld (wat beteken dat dit positionen displayis oorskryf). Ingesluit is die modale kopskrif, modale liggaam (vereis vir padding), en modale voetskrif (opsioneel). Ons vra dat jy, waar moontlik, modale opskrifte met afwyshandelinge insluit, of 'n ander eksplisiete afwysaksie verskaf.

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

Regstreekse demo

Wissel 'n werkende modale demo deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

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

Statiese agtergrond

Wanneer agtergrond op staties gestel is, sal die modaal nie toemaak wanneer daar buite geklik word nie. Klik op die knoppie hieronder om dit te probeer.

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

Deur lang inhoud te blaai

Wanneer modale te lank word vir die gebruiker se kykpoort of toestel, blaai hulle onafhanklik van die bladsy self. Probeer die demonstrasie hieronder om te sien wat ons bedoel.

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.

Jy kan ook 'n blaaibare modaal skep wat die modale liggaam laat blaai deur by .modal-dialog-scrollablete voeg .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>

Vertikaal gesentreer

Voeg .modal-dialog-centeredby .modal-dialogom die modaal vertikaal te sentreer.

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

Gereedskapwenke en popovers

Tooltips en popovers kan binne modale geplaas word soos nodig. Wanneer modale gesluit is, word enige gereedskapwenke en popovers binne ook outomaties van die hand gewys.

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

Gebruik die rooster

Gebruik die Bootstrap-roosterstelsel binne 'n modaal deur .container-fluidbinne die .modal-body. Gebruik dan die normale roosterstelselklasse soos op enige ander plek.

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

Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer met effens verskillende inhoud? Gebruik event.relatedTargeten HTML- data-*kenmerke (moontlik via jQuery ) om die inhoud van die modaal te verander na gelang van watter knoppie geklik is.

Hieronder is 'n lewendige demonstrasie gevolg deur voorbeeld HTML en JavaScript. Vir meer inligting, lees die modale gebeurtenisse dokumente vir besonderhede oor 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)
})

Verander animasie

Die $modal-fade-transformveranderlike bepaal die transformasietoestand van .modal-dialogvoor die modale inverfop-animasie, die $modal-show-transformveranderlike bepaal die transformasie van .modal-dialogaan die einde van die modale-infade-animasie.

As jy byvoorbeeld 'n inzoom-animasie wil hê, kan jy instel $modal-fade-transform: scale(.8).

Verwyder animasie

Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fadeklas van jou modale opmaak.

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

Dinamiese hoogtes

As die hoogte van 'n modaal verander terwyl dit oop is, moet jy bel $('#myModal').modal('handleUpdate')om die modaal se posisie aan te pas indien 'n skuifbalk verskyn.

Toeganklikheid

Maak seker dat jy aria-labelledby="...", met verwysing na die modale titel, byvoeg .modal. Daarbenewens kan jy 'n beskrywing van jou modale dialoog gee met aria-describedbyop .modal. Let daarop dat jy nie hoef by te voeg nie role="dialog", aangesien ons dit reeds via JavaScript byvoeg.

Inbedding van YouTube-video's

Om YouTube-video's in modale in te sluit, vereis bykomende JavaScript wat nie in Bootstrap is nie om outomaties afspeel te stop en meer. Sien hierdie nuttige Stack Overflow-plasing vir meer inligting.

Opsionele groottes

Modale het drie opsionele groottes, beskikbaar via wysigerklasse om op 'n .modal-dialog. Hierdie groottes skop in by sekere breekpunte om horisontale skuifbalke op nouer uitsigpoorte te vermy.

Grootte	Klas	Modale maksimum breedte
Klein	`.modal-sm`	`300px`
Verstek	Geen	`500px`
Groot	`.modal-lg`	`800px`
Ekstra groot	`.modal-xl`	`1140px`

Ons verstek modaal sonder wysigerklas vorm die "medium" grootte modaal.

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

Gebruik

Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit dra ook by .modal-opentot die <body>om verstek blaai-gedrag te ignoreer en genereer 'n .modal-backdropom 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.

Via data-eienskappe

Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"of href="#foo"om 'n spesifieke modaal te rig om te wissel.

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

Via JavaScript

Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-backdrop="".

Naam	Tik	Verstek	Beskrywing
agtergrond	boolean of die snaar`'static'`	waar	Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer `static`vir 'n agtergrond wat nie die modaal toemaak met klik nie.
sleutelbord	boolean	waar	Maak die modaal toe wanneer escape-sleutel gedruk word
fokus	boolean	waar	Plaas die fokus op die modaal wanneer geïnisialiseer.
Wys	boolean	waar	Toon die modaal wanneer geïnisialiseer.

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

`.modal(options)`

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

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

`.modal('toggle')`

Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modalof hidden.bs.modalgebeurtenis plaasvind).

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

`.modal('show')`

Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modalgebeurtenis plaasvind).

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

`.modal('hide')`

Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modalgebeurtenis plaasvind).

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

`.modal('handleUpdate')`

Pas die modaal se posisie handmatig aan as die hoogte van 'n modaal verander terwyl dit oop is (dws indien 'n rolbalk verskyn).

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

`.modal('dispose')`

Vernietig 'n element se modaal.

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel. Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">).

Soort gebeurtenis	Beskrywing
wys.bs.modaal	Hierdie gebeurtenis begin onmiddellik wanneer die `show`instansiemetode geroep word. As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die `relatedTarget`eienskap van die gebeurtenis.
getoon.bs.modaal	Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die `relatedTarget`eienskap van die gebeurtenis.
verberg.bs.modaal	Hierdie gebeurtenis word onmiddellik afgevuur wanneer die `hide`instansiemetode geroep is.
verborge.bs.modale	Hierdie gebeurtenis word afgevuur wanneer die modaal klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
verbergVoorkom.bs.modaal	Hierdie gebeurtenis word afgevuur wanneer die modaal gewys word, sy agtergrond is `static`en 'n klik buite die modaal of 'n ontsnap-sleuteldruk word uitgevoer met die sleutelbordopsie of `data-keyboard`gestel op `false`.

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