in English

Modálny

Pomocou modálneho doplnku JavaScript od Bootstrapu pridajte na svoje stránky 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">
  <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>

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

Statické pozadie

Keď je pozadie nastavené na statické, modál sa nezatvorí, keď kliknete mimo neho. 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" 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>

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.