in English

Модал

Користите Боотстрап-ов ЈаваСцрипт модални додатак да додате дијалоге на своју веб локацију за оквире за преглед, корисничка обавештења или потпуно прилагођени садржај.

Како то ради

Пре него што почнете са Боотстрап-овом модалном компонентом, обавезно прочитајте следеће јер су се наше опције менија недавно промениле.

Модали су направљени помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а. Они су позиционирани изнад свега осталог у документу и уклањају померање из документа <body>тако да се уместо тога помера модални садржај.
Кликом на модалну „позадину“ аутоматски ће се затворити модал.
Боотстрап подржава само један модални прозор у исто време. Угнежђени модали нису подржани јер верујемо да су лоше корисничко искуство.
Модали користе position: fixed, што понекад може бити мало посебно у погледу његовог приказивања. Кад год је то могуће, поставите свој модални ХТМЛ на позицију највишег нивоа да бисте избегли потенцијалне сметње од других елемената. Вероватно ћете наићи на проблеме када угнезујете а .modalунутар другог фиксног елемента.
Још једном, због position: fixed, постоје нека упозорења у вези са коришћењем модала на мобилним уређајима. Погледајте нашу документацију за подршку претраживача за детаље.
Због начина на који ХТМЛ5 дефинише своју семантику, ХТМЛ autofocusатрибут нема ефекта у Боотстрап модалима. Да бисте постигли исти ефекат, користите неки прилагођени ЈаваСцрипт:

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

Ефекат анимације ове компоненте зависи од prefers-reduced-motionмедијског упита. Погледајте одељак о смањеном покрету наше документације о приступачности .

Наставите да читате за демонстрације и упутства за употребу.

Примери

Испод је статички модални пример (што значи да су његови positionи displayзамењени). Укључено је модално заглавље, модално тело (обавезно за padding) и модално подножје (опционо). Тражимо да укључите модална заглавља са радњама одбацивања кад год је то могуће или да наведете другу експлицитну радњу одбацивања.

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

Демо уживо

Укључите радну модалну демонстрацију кликом на дугме испод. Клизиће надоле и избледети са врха странице.

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

Статичка позадина

Када је позадина постављена на статичну, модал се неће затворити када кликнете изван њега. Кликните на дугме испод да бисте га испробали.

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

Померање дугог садржаја

Када модали постану предуги за корисников оквир за приказ или уређај, они се померају независно од саме странице. Испробајте демонстрацију испод да видите на шта мислимо.