Модал
Користите Боотстрап-ов ЈаваСцрипт модални додатак да додате дијалоге на своју веб локацију за оквире за преглед, корисничка обавештења или потпуно прилагођени садржај.
Како то ради
Пре него што почнете са Боотстрап-овом модалном компонентом, обавезно прочитајте следеће јер су се наше опције менија недавно промениле.
- Модали су направљени помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а. Они су позиционирани изнад свега осталог у документу и уклањају померање из документа
<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">×</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">×</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">×</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>
Померање дугог садржаја
Када модали постану предуги за корисников оквир за приказ или уређај, они се померају независно од саме странице. Испробајте демонстрацију испод да видите на шта мислимо.
Такође можете креирати модал који се може померати и који омогућава померање модалног тела додавањем .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 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>
Користећи мрежу
Користите Боотстрап мрежни систем унутар модала тако што ћете се угнездити .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 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>
Различити модални садржај
Имате гомилу дугмади која сви покрећу исти модал са мало другачијим садржајем? Користите event.relatedTarget
и ХТМЛ data-*
атрибуте (могуће преко јКуери ) да бисте променили садржај модала у зависности од тога на које дугме сте кликнули.
Испод је демо уживо праћен примерима ХТМЛ-а и ЈаваСцрипт-а. За више информација, прочитајте документацију о модалним догађајима за детаље о 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">×</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)
})
Промените анимацију
Променљива одређује $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').modal('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-open
да се <body>
заобиђе подразумевано понашање померања и генерише а .modal-backdrop
да би се обезбедила област клика за одбацивање приказаних модала када се кликне ван модалног.
Преко атрибута података
Активирајте модал без писања ЈаваСцрипт-а. Поставите data-toggle="modal"
на елемент контролера, као што је дугме, заједно са data-target="#foo"
или href="#foo"
да бисте циљали одређени модал за пребацивање.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Преко ЈаваСцрипт-а
Позовите модални са ИД myModal
-ом са једном линијом ЈаваСцрипт-а:
$('#myModal').modal(options)
Опције
Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-
, као у data-backdrop=""
.
Име | Тип | Уобичајено | Опис |
---|---|---|---|
позадина | боолеан или стринг'static' |
истинито | Укључује елемент модалне позадине. Алтернативно, наведите static за позадину која не затвара модал на клик. |
тастатура | боолеан | истинито | Затвара модал када се притисне тастер за излаз |
фокус | боолеан | истинито | Ставља фокус на модални када се иницијализира. |
Прикажи | боолеан | истинито | Приказује модални када се иницијализира. |
Методе
Асинхроне методе и прелази
Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .
Погледајте нашу ЈаваСцрипт документацију за више информација .
.modal(options)
Активира ваш садржај као модални. Прихвата опционе опције object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Ручно укључује модал. Враћа позиваоцу пре него што је модал заиста приказан или сакривен (тј. пре него што се деси догађај shown.bs.modal
или ).hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
Ручно отвара модал. Враћа позиваоцу пре него што је модал заиста приказан (тј. пре него што се shown.bs.modal
догађај деси).
$('#myModal').modal('show')
.modal('hide')
Ручно сакрива модал. Враћа позиваоцу пре него што је модал заиста сакривен (тј. пре него што се hidden.bs.modal
догађај деси).
$('#myModal').modal('hide')
.modal('handleUpdate')
Ручно поново подесите позицију модала ако се висина модала промени док је отворен (тј. у случају да се појави трака за померање).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Уништава модални елемент.
Догађаји
Боотстрап-ова модална класа излаже неколико догађаја за спајање на модалну функционалност. Сви модални догађаји се активирају на самом модалном (тј. на <div class="modal">
).
Тип догађаја | Опис |
---|---|
схов.бс.модал | Овај догађај се покреће одмах када show се позове метод инстанце. Ако је изазван кликом, елемент на који се кликне је доступан као relatedTarget својство догађаја. |
приказано.бс.модал | Овај догађај се покреће када модал постане видљив кориснику (сачекаће да се ЦСС транзиције доврше). Ако је изазван кликом, елемент на који се кликне је доступан као relatedTarget својство догађаја. |
хиде.бс.модал | Овај догађај се покреће одмах када hide се позове метод инстанце. |
хидден.бс.модал | Овај догађај се покреће када модал заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше). |
хидеПревентед.бс.модал | Овај догађај се покреће када је модал приказан, његова позадина је static и клик изван модалног или притиснут тастер Есцапе се изврши са опцијом тастатуре или data-keyboard постављеном на false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})