Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Модал

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

На овој страници

Како то ради

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

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

myModal.addEventListener('shown.bs.modal', () => {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

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

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

Такође можете креирати модал који се може померати и који омогућава померање модалног тела додавањем .modal-dialog-scrollableу .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Вертикално центриран

Додајте .modal-dialog-centeredу да .modal-dialogбисте вертикално центрирали модал.

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

Објашњења и искачући огласи

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

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Користећи мрежу

Користите Боотстрап мрежни систем унутар модала тако што ћете се угнездити .container-fluidунутар .modal-body. Затим користите нормалне класе система мреже као и било где другде.

<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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

Различити модални садржај

Имате гомилу дугмади која сви покрећу исти модал са мало другачијим садржајем? Користите event.relatedTargetи ХТМЛ data-bs-*атрибуте да бисте променили садржај модала у зависности од тога на које дугме сте кликнули.

Испод је демо уживо праћен примерима ХТМЛ-а и ЈаваСцрипт-а. За више информација, прочитајте документацију о модалним догађајима за детаље о relatedTarget.

хтмл 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Пребацивање између модала

Пребаците се између више модала са неким паметним постављањем атрибута data-bs-targetи . data-bs-toggleНа пример, можете да промените модал за ресетовање лозинке унутар већ отвореног модалног система за пријављивање. Имајте на уму да више модала не може бити отворено у исто време — овај метод једноставно пребацује између два одвојена модала.

Отвори први модални
хтмл 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Промените анимацију

Променљива одређује $modal-fade-transformстање трансформације .modal-dialogпре модалне анимације постепеног појављивања, $modal-show-transformпроменљива одређује трансформацију .modal-dialogна крају модалне анимације постепеног појављивања.

Ако желите, на пример, анимацију за увећање, можете да подесите $modal-fade-transform: scale(.8).

Уклони анимацију

За модале који се једноставно појављују, а не бледе, уклоните .fadeкласу из модалне ознаке.

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

Динамичке висине

Ако се висина модала промени док је отворен, требало би да позовете myModal.handleUpdate()да бисте поново подесили позицију модала у случају да се појави трака за померање.

Приступачност

Обавезно додајте aria-labelledby="...", позивајући се на модални наслов, у .modal. Поред тога, можете дати опис свог модалног дијалога са aria-describedbyна .modal. Имајте на уму да не морате да додајете role="dialog"пошто га већ додајемо преко ЈаваСцрипт-а.

Уграђивање ИоуТубе видео записа

Уградња ИоуТубе видео снимака у модале захтева додатни ЈаваСцрипт који није у Боотстрапу да би се аутоматски зауставила репродукција и још много тога. Погледајте ову корисну објаву Стацк Оверфлов за више информација.

Опционе величине

Модали имају три опционе величине, доступне преко класа модификатора које се постављају на .modal-dialog. Ове величине се појављују на одређеним тачкама прекида да би се избегле хоризонталне траке за померање на ужим прозорима.

Величина Класа Модална максимална ширина
Мала .modal-sm 300px
Уобичајено Ниједан 500px
Велики .modal-lg 800px
Екстра велики .modal-xl 1140px

Наш подразумевани модал без класе модификатора чини модал „средње“ величине.

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

Модал преко целог екрана

Још једна замена је опција да се појави модални прозор који покрива кориснички оквир за приказ, доступан преко класа модификатора које су постављене на .modal-dialog.

Класа Доступност
.modal-fullscreen Увек
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, модали сада користе локалне ЦСС променљиве на .modalи .modal-backdropза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Сасс варијабле

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Лооп

Прилагодљиви модали преко целог екрана се генеришу преко $breakpointsмапе и петље у scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Употреба

Модални додатак укључује ваш скривени садржај на захтев, преко атрибута података или ЈаваСцрипт-а. Такође замењује подразумевано понашање померања и генерише а .modal-backdropда обезбеди област клика за одбацивање приказаних модала када се кликне ван модала.

Преко атрибута података

Искључи

Активирајте модал без писања ЈаваСцрипт-а. Поставите data-bs-toggle="modal"на елемент контролера, попут дугмета, заједно са data-bs-target="#foo"или href="#foo"да бисте циљали одређени модал за пребацивање.

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

Одбаци

Отпуштање се може постићи помоћу dataатрибута на дугмету унутар модала као што је приказано у наставку:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

или на дугме изван модалног користећи data-bs-targetкао што је приказано у наставку:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Иако су оба начина одбацивања модала подржана, имајте на уму да одбацивање модала извана не одговара шаблону дијалога (модалном) Водичу за АРИА ауторске праксе . Урадите ово на сопствени ризик.

Преко ЈаваСцрипт-а

Направите модал са једном линијом ЈаваСцрипт-а:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

Име Тип Уобичајено Опис
backdrop боолеан,'static' true Укључује елемент модалне позадине. Алтернативно, наведите staticза позадину која не затвара модал када се кликне.
focus боолеан true Ставља фокус на модални када се иницијализира.
keyboard боолеан true Затвара модал када се притисне тастер за излаз.

Методе

Асинхроне методе и прелази

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

Опције проласка

Активира ваш садржај као модални. Прихвата опционе опције object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Метод Опис
dispose Уништава модални елемент. (Уклања сачуване податке на ДОМ елементу)
getInstance Статичка метода која вам омогућава да добијете модалну инстанцу повезану са ДОМ елементом.
getOrCreateInstance Статичка метода која вам омогућава да добијете модалну инстанцу повезану са ДОМ елементом или креирате нову у случају да није иницијализована.
handleUpdate Ручно поново подесите позицију модала ако се висина модала промени док је отворен (тј. у случају да се појави трака за померање).
hide Ручно сакрива модал. Враћа позиваоцу пре него што је модал заиста сакривен (тј. пре него што се hidden.bs.modalдогађај деси).
show Ручно отвара модал. Враћа позиваоцу пре него што је модал заиста приказан (тј. пре него што се shown.bs.modalдогађај деси). Такође, можете проследити ДОМ елемент као аргумент који се може примити у модалним догађајима (као relatedTargetсвојство). (тј const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Ручно пребацује модал. Враћа позиваоцу пре него што је модал заиста приказан или сакривен (тј. пре него што се деси догађај shown.bs.modalили ).hidden.bs.modal

Догађаји

Боотстрап-ова модална класа излаже неколико догађаја за спајање на модалну функционалност. Сви модални догађаји се активирају на самом модалном (тј. на <div class="modal">).

Догађај Опис
hide.bs.modal Овај догађај се покреће одмах када hideсе позове метод инстанце.
hidden.bs.modal Овај догађај се покреће када модал заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
hidePrevented.bs.modal Овај догађај се покреће када је приказан модал, његова позадина staticи када се изврши клик изван модала. Догађај се такође покреће када се притисне тастер за излаз и keyboardопција је постављена на false.
show.bs.modal Овај догађај се покреће одмах када showсе позове метод инстанце. Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја.
shown.bs.modal Овај догађај се покреће када модал постане видљив кориснику (сачекаће да се ЦСС транзиције доврше). Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})