Modal

Benotzt Bootstrap's JavaScript modal Plugin fir Dialogen op Är Site fir Lightboxen, Benotzer Notifikatiounen oder komplett personaliséiert Inhalter ze addéieren.

Wéi et funktionnéiert

Ier Dir mam Bootstrap's modale Komponent ufänkt, gitt sécher déi folgend ze liesen well eis Menüoptioune viru kuerzem geännert hunn.

Modale si mat HTML, CSS a JavaScript gebaut. Si sinn iwwer alles anescht am Dokument positionéiert an ewechzehuelen Scroll aus dem <body>sou datt modal Inhalt scrollt amplaz.
Klickt op de Modal "Kulisse" mécht de Modal automatesch zou.
Bootstrap ënnerstëtzt nëmmen eng modal Fënster gläichzäiteg. Nested Modals ginn net ënnerstëtzt well mir gleewen datt se schlecht Benotzererfarungen sinn.
Modals benotzen position: fixed, wat heiansdo e bësse speziell iwwer seng Rendering ka sinn. Wann ëmmer méiglech, setzt Är modal HTML an enger Top-Level Positioun fir potenziell Interferenz vun aneren Elementer ze vermeiden. Dir wäert méiglecherweis an Probleemer lafen wann Dir en .modalan engem anere fixen Element nest.
Nach eng Kéier, wéinst position: fixed, ginn et e puer Virschléi mat der Benotzung vu Modalen op mobilen Apparater. Gesinn eis Browser Support Dokumenter fir Detailer.
Wéinst wéi HTML5 seng Semantik definéiert, huet den autofocusHTML Attribut keen Effekt a Bootstrap Modal. Fir deeselwechten Effekt z'erreechen, benotzt e puer personaliséiert JavaScript:

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

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Liest weider fir Demos a Benotzungsrichtlinnen.

Beispiller

Drënner ass e statesch modal Beispill (dat heescht seng positiona displaygoufen iwwerschriwwen). Abegraff sinn de modale Header, modale Kierper (obligatoresch fir padding), a modal Fousszeilen (optional). Mir froen datt Dir modal Header mat Entloossaktiounen enthält wa méiglech, oder eng aner explizit Entloossaktioun ubitt.

<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

Toggle eng funktionéierend modal Demo andeems Dir op de Knäppchen hei drënner klickt. Et rutscht erof a verschwannen vun uewen op der Säit.

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

Statesch Kuliss

Wann den Hannergrond op statesch gesat ass, gëtt de Modal net zou wann Dir dobausse klickt. Klickt op de Knäppchen hei ënnen fir et ze probéieren.

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

Wann d'Modalen ze laang ginn fir de Viewport oder den Apparat vum Benotzer, scrollen se onofhängeg vun der Säit selwer. Probéiert d'Demo hei ënnen fir ze kucken wat mir mengen.

Wat folgend ass just e Plazhaltertext fir dëse modalen Dialog. Schlupp op Rosé, Silver Lake Sonn, kommen all faul. Et ass an der Handfläch elo Puppelchen. Also hu mir de Boulevard getraff. Also maacht e Wonsch, ech maachen et wéi Äre Gebuertsdag all Dag. Fillt Dir Iech schons déif sechs Féiss ënner begruewen? Et ass Zäit déi grouss Ballonen erauszebréngen. Dir hätt de gréisste gewiescht. Passstempel, si ass kosmopolitesch. Äre Kuss ass kosmesch, all Beweegung ass Magie.

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.

Dir kënnt och e scrollbare Modal erstellen, deen de modale Kierper scrollen erlaabt andeems Dir .modal-dialog-scrollableop .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>

Vertikal zentréiert

Füügt .modal-dialog-centeredfir .modal-dialogde Modal vertikal ze zentréieren.

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

Tooltips a Popovers kënne bannent Modale plazéiert ginn wéi néideg. Wann Modale zougemaach sinn, ginn all Tooltipps a Popovers bannent och automatesch entlooss.

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

Benotzt de Gitter

Benotzt de Bootstrap Gitter System bannent engem Modal andeems Dir .container-fluidan der .modal-body. Dann benotzt déi normal Gittersystemklassen wéi Dir soss anzwousch géift.

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

Hutt Dir eng Rëtsch Knäppercher déi all déiselwecht Modal mat liicht verschiddenen Inhalter ausléisen? Benotzt event.relatedTargetan HTML data-*Attributer (méiglecherweis iwwer jQuery ) fir den Inhalt vun der Modal ze variéieren jee no wéi ee Knäppchen geklickt gouf.

Drënner ass eng Live Demo gefollegt vum Beispill HTML a JavaScript. Fir méi Informatioun, liest d'Modal Eventer Dokumenter fir Detailer iwwer 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)
})

Änneren Animatioun

D' $modal-fade-transformVariabel bestëmmt den Transformatiounszoustand vu .modal-dialogvirun der modaler Fade-in Animatioun, d' $modal-show-transformVariabel bestëmmt d'Transformatioun vun .modal-dialogum Enn vun der modaler Fade-in Animatioun.

Wann Dir zum Beispill eng Zoom-In Animatioun wëllt, kënnt Dir setzen $modal-fade-transform: scale(.8).

Ewechzehuelen Animatioun

Fir Modaler déi einfach erschéngen anstatt ze verschwannen fir ze kucken, läscht d' .fadeKlass aus Ärem Modal Markup.

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

Dynamesch Héichten

Wann d'Héicht vun engem Modal ännert wärend et op ass, sollt Dir uruffen $('#myModal').modal('handleUpdate')fir d'Positioun vum Modal z'änneren am Fall wou eng Scrollbar erscheint.

Accessibilitéit

Gitt sécher bäizefügen aria-labelledby="...", de modalen Titel ze referenzéieren, op .modal. Zousätzlech kënnt Dir eng Beschreiwung vun Ärem modalen Dialog mat aria-describedbyop ginn .modal. Notéiert datt Dir net braucht derbäi ze ginn role="dialog"well mir et scho iwwer JavaScript addéieren.

Embetting YouTube Videoen

Embedding vu YouTube Videoen a Modalen erfuerdert zousätzlech JavaScript net am Bootstrap fir automatesch d'Playback ze stoppen a méi. Gesinn dës hëllefräich Stack Overflow Post fir méi Informatiounen.

Optional Gréissten

Modaler hunn dräi fakultativ Gréissten, verfügbar via Modifikateur Klassen op engem gesat ginn .modal-dialog. Dës Gréisste kicken op bestëmmte Breakpunkte fir horizontale Scrollbars op méi schmuele Viewports ze vermeiden.

Gréisst	Klass	Modal Max-Breet
Kleng	`.modal-sm`	`300px`
Default	Keen	`500px`
Grouss	`.modal-lg`	`800px`
Extra grouss	`.modal-xl`	`1140px`

Eis Standardmodal ouni Modifizéierungsklass mécht de "mëttel" Gréisst Modal aus.

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

Benotzung

De modale Plugin wiesselt Äre verstoppte Inhalt op Ufro, iwwer Datenattributer oder JavaScript. Et füügt .modal-openoch un <body>d'Standard Scrollverhalen z'iwwerschreiden a generéiert e .modal-backdropfir e Klickberäich ze bidden fir ugewisen Modaler ze entloossen wann Dir ausserhalb vum Modal klickt.

Via daten Attributer

Aktivéiert e Modal ouni JavaScript ze schreiwen. Setzt data-toggle="modal"op e Controllerelement, wéi e Knäppchen, zesumme mat engem data-target="#foo"oder href="#foo"fir e spezifesche Modal ze zielen fir ze wiesselen.

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

Iwwer JavaScript

Rufft e Modal mat ID myModalmat enger eenzeger Zeil vu JavaScript:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-backdrop="".

Numm	Typ	Default	Beschreiwung
Kuliss	boolesch oder de String`'static'`	wouer	Ëmfaasst e modal Kuliss Element. Alternativ, spezifizéiert `static`fir eng Kuliss déi de Modal net op Klick zoumaacht.
Tastatur	boolesch	wouer	Maacht de Modal zou wann de Fluchtschlëssel gedréckt gëtt
konzentréieren	boolesch	wouer	Stellt de Fokus op de Modal wann se initialiséiert ginn.
weisen	boolesch	wouer	Weist de Modal wann initialiséiert.

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

`.modal(options)`

Aktivéiert Ären Inhalt als Modal. Akzeptéiert eng fakultativ Optiounen object.

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

`.modal('toggle')`

Manuell wiesselt e Modal. Gëtt zréck op den Uruffer ier de Modal tatsächlech gewisen oder verstoppt goufshown.bs.modal ( dh ier den hidden.bs.modalEvent geschitt ass).

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

`.modal('show')`

Manuell mécht e Modal op. Gitt zréck op den Uruffer ier de Modal tatsächlech gewisen gouf (dh ier d' shown.bs.modalEvenement geschitt ass).

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

`.modal('hide')`

Manuell verstoppt e Modal. Gitt zréck op den Uruffer ier de Modal tatsächlech verstoppt ass (dh ier d' hidden.bs.modalEvenement geschitt ass).

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

`.modal('handleUpdate')`

Manuell d'Positioun vum Modal nei ajustéieren wann d'Héicht vun engem Modal ännert wärend et op ass (dh am Fall wou eng Scrollbar erscheint).

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

`.modal('dispose')`

Zerstéiert d'Modal vun engem Element.

Evenementer

Dem Bootstrap seng modal Klass weist e puer Eventer fir an d'modal Funktionalitéit unzehaken. All Modal Eventer ginn op de Modal selwer geschoss (dh op der <div class="modal">).

Event Typ	Beschreiwung
show.bs.modal	Dëst Event brennt direkt wann d' `show`Instanzmethod genannt gëtt. Wann duerch e Klick verursaacht gëtt, ass dat geklickt Element als `relatedTarget`Eegeschafte vum Event verfügbar.
ugewisen.bs.modal	Dëst Evenement gëtt ausgeléist wann de Modal fir de Benotzer siichtbar gemaach gouf (waart op CSS Iwwergäng fir fäerdeg ze maachen). Wann duerch e Klick verursaacht gëtt, ass dat geklickt Element als `relatedTarget`Eegeschafte vum Event verfügbar.
hide.bs.modal	Dëst Evenement gëtt direkt gebrannt wann d' `hide`Instanzmethod genannt gouf.
hidden.bs.modal	Dëst Evenement gëtt ausgeléist wann de Modal fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng fir fäerdeg ze sinn).
hidePrevented.bs.modal	Dëst Evenement gëtt ausgeléist wann de Modal gewise gëtt, seng Kuliss ass `static`an e Klick ausserhalb vum Modal oder eng Flucht Tastepress gëtt mat der Tastaturoptioun gemaach oder `data-keyboard`op gesat `false`.

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