Source

Modálny

Pomocou modálneho doplnku JavaScript od Bootstrapu pridajte na svoju stránku dialógové okná pre svetelné boxy, upozornenia používateľov alebo úplne vlastný obsah.

Ako to funguje

Skôr ako začnete s modálnym komponentom Bootstrap, prečítajte si nasledujúce informácie, pretože naše možnosti ponuky sa nedávno zmenili.

Modály sú vytvorené pomocou HTML, CSS a JavaScriptu. Sú umiestnené nad všetkým ostatným v dokumente a odstraňujú posúvanie z dokumentu <body>, aby sa namiesto toho posúval modálny obsah.
Kliknutím na modálne „pozadie“ sa modal automaticky zatvorí.
Bootstrap podporuje naraz iba jedno modálne okno. Vnorené modály nie sú podporované, pretože sa domnievame, že majú zlý dojem používateľa.
Modály používajú position: fixed, čo môže byť niekedy trochu špecifické pri jeho vykresľovaní. Vždy, keď je to možné, umiestnite svoj modálny kód HTML na najvyššiu úroveň, aby ste predišli potenciálnemu rušeniu z iných prvkov. Pri vnorení .modaldo iného pevného prvku pravdepodobne narazíte na problémy.
Ešte raz, kvôli position: fixed, existuje niekoľko upozornení na používanie modálov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača .
Vzhľadom na to, ako HTML5 definuje svoju sémantiku, atribút autofocusHTML nemá žiadny vplyv na modály Bootstrap. Ak chcete dosiahnuť rovnaký efekt, použite vlastný JavaScript:

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

Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Pokračujte v čítaní ukážok a pokynov na používanie.

Príklady

Nižšie je uvedený statický modálny príklad (čo znamená jeho positiona displayboli prepísané). Zahrnuté sú modálna hlavička, modálne telo (povinné pre padding) a modálna päta (voliteľné). Žiadame, aby ste vždy, keď je to možné, zahrnuli modálne hlavičky s akciami odmietnutia alebo poskytli inú explicitnú akciu odmietnutia.

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

Živá ukážka

Prepnite ukážku pracovného modu kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

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

Statické pozadie

Keď je pozadie nastavené na statické, modál sa pri kliknutí mimo neho nezatvorí. Kliknutím na tlačidlo nižšie to vyskúšate.

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

Posúvanie dlhého obsahu

Keď sú modály príliš dlhé pre zobrazovanú oblasť alebo zariadenie používateľa, posúvajú sa nezávisle od samotnej stránky. Vyskúšajte ukážku nižšie, aby ste videli, čo máme na mysli.

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

Môžete tiež vytvoriť rolovací modal, ktorý umožňuje rolovanie modálneho tela pridaním .modal-dialog-scrollabledo .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>

Vertikálne vycentrované

Pridať .modal-dialog-centereddo .modal-dialog, aby sa modal zvislo vycentroval.

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

Popisy a kontextové okná

Popisy a kontextové okná je možné podľa potreby umiestniť do modálov . Keď sú modály zatvorené, všetky popisy a kontextové okná v rámci sa tiež automaticky zatvoria.

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

Pomocou mriežky

Využite mriežkový systém Bootstrap v rámci modálu vnorením .container-fluidsa do .modal-body. Potom použite normálne triedy mriežkového systému ako kdekoľvek inde.

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

Máte veľa tlačidiel, ktoré spúšťajú rovnaký modál s mierne odlišným obsahom? Použite event.relatedTargeta HTML data-*atribúty (prípadne cez jQuery ) na zmenu obsahu modálu v závislosti od toho, na ktoré tlačidlo ste klikli.

Nižšie je uvedená živá ukážka, za ktorou nasleduje príklad HTML a JavaScript. Ďalšie informácie nájdete v dokumentoch modálnych udalostí , kde nájdete podrobnosti o 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)
})

Zmeniť animáciu

Premenná $modal-fade-transformurčuje stav transformácie .modal-dialogpred modálnou fade-in animáciou, $modal-show-transformpremenná určuje transformáciu .modal-dialogna konci modálnej fade-in animácie.

Ak chcete napríklad animáciu priblíženia, môžete nastaviť $modal-fade-transform: scale(.8).

Odstrániť animáciu

V prípade modálov, ktoré sa jednoducho objavia, než aby sa rozplynuli, odstráňte .fadetriedu zo svojho modálneho označenia.

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

Dynamické výšky

Ak sa výška modálu zmení, keď je otvorený, mali by ste zavolať $('#myModal').modal('handleUpdate'), aby ste upravili polohu modálu v prípade, že sa objaví posuvník.

Prístupnosť

Nezabudnite pridať role="dialog"a aria-labelledby="...", odkazujúc na modálny názov, na .modala role="document"na .modal-dialogsamotný názov. Okrem toho môžete zadať popis svojho modálneho dialógu aria-describedbypomocou .modal.

Vkladanie videí YouTube

Vkladanie videí YouTube do modálov vyžaduje dodatočný JavaScript, ktorý nie je súčasťou Bootstrapu, aby sa prehrávanie automaticky zastavilo a ďalšie. Viac informácií nájdete v tomto užitočnom príspevku Stack Overflow .

Voliteľné veľkosti

Modály majú tri voliteľné veľkosti dostupné prostredníctvom tried modifikátorov, ktoré sa umiestnia na .modal-dialog. Tieto veľkosti sa spúšťajú v určitých bodoch prerušenia, aby sa zabránilo vodorovným posuvníkom na užších výrezoch.

Veľkosť	Trieda	Modálna maximálna šírka
Malý	`.modal-sm`	`300px`
Predvolené	žiadne	`500px`
Veľký	`.modal-lg`	`800px`
Extra veľké	`.modal-xl`	`1140px`

Náš predvolený modál bez triedy modifikátorov predstavuje modál „strednej“ veľkosti.

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

Použitie

Modálny doplnok prepína váš skrytý obsah na požiadanie prostredníctvom atribútov údajov alebo JavaScriptu. Pridáva tiež .modal-openk <body>prepísaniu predvoleného správania rolovania a generuje oblasť .modal-backdropna kliknutie na zatvorenie zobrazených modálov pri kliknutí mimo modálu.

Cez dátové atribúty

Aktivujte modál bez písania JavaScriptu. Nastavte data-toggle="modal"na prvku ovládača, ako je tlačidlo, spolu s data-target="#foo"alebo href="#foo"na zacielenie na konkrétny modál na prepínanie.

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

Cez JavaScript

Zavolajte modal s ID myModals jedným riadkom JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-backdrop="".

názov	Typ	Predvolené	Popis
pozadie	boolean alebo reťazec`'static'`	pravda	Obsahuje prvok modálneho pozadia. Prípadne zadajte `static`pozadie, ktoré nezatvorí modál po kliknutí alebo stlačení klávesu Escape.
klávesnica	boolovská hodnota	pravda	Zatvorí modál po stlačení klávesu Escape
zameranie	boolovská hodnota	pravda	Pri inicializácii sa zameriava na modal.
šou	boolovská hodnota	pravda	Po inicializácii zobrazí modal.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

`.modal(options)`

Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object.

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

`.modal('toggle')`

Manuálne prepína modal. Vráti sa k volajúcemu predtým, ako sa modal skutočne ukázal alebo skryl (tj predtým, ako nastane udalosť shown.bs.modalalebo ).hidden.bs.modal

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

`.modal('show')`

Manuálne otvorí modál. Vráti sa k volajúcemu skôr, ako sa modal skutočne ukázal (tj predtým, ako shown.bs.modalnastane udalosť).

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

`.modal('hide')`

Manuálne skryje modal. Vráti sa k volajúcemu skôr, ako bol modal skutočne skrytý (tj predtým, ako hidden.bs.modalnastane udalosť).

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

`.modal('handleUpdate')`

Ručne upravte polohu modálu, ak sa výška modálu zmení, keď je otvorený (tj v prípade, že sa objaví posuvník).

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

`.modal('dispose')`

Zničí modálny prvok prvku.

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii. Všetky modálne udalosti sa spúšťajú na samotnom modale (tj na <div class="modal">).

Typ udalosti	Description
show.bs.modal	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.bs.modal	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed.

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