Користите Боотстрап-ов ЈаваСцрипт модални додатак да додате дијалоге на своју веб локацију за оквире за преглед, корисничка обавештења или потпуно прилагођени садржај.
Како то ради
Пре него што почнете са Боотстрап-овом модалном компонентом, обавезно прочитајте следеће јер су се наше опције менија недавно промениле.
Модали су направљени помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а. Они су позиционирани изнад свега осталог у документу и уклањају померање из документа <body>тако да се уместо тога помера модални садржај.
Кликом на модалну „позадину“ аутоматски ће се затворити модал.
Боотстрап подржава само један модални прозор у исто време. Угнежђени модали нису подржани јер верујемо да су лоше корисничко искуство.
Модали користе position: fixed, што понекад може бити мало посебно у погледу његовог приказивања. Кад год је то могуће, поставите свој модални ХТМЛ на позицију највишег нивоа да бисте избегли потенцијалне сметње од других елемената. Вероватно ћете наићи на проблеме када угнезујете а .modalунутар другог фиксног елемента.
Због начина на који ХТМЛ5 дефинише своју семантику, ХТМЛ autofocusатрибут нема ефекта у Боотстрап модалима. Да бисте постигли исти ефекат, користите неки прилагођени ЈаваСцрипт:
Наставите да читате за демонстрације и упутства за употребу.
Примери
Модалне компоненте
Испод је статички модални пример (што значи да су његови positionи displayзамењени). Укључено је модално заглавље, модално тело (обавезно за padding) и модално подножје (опционо). Тражимо да укључите модална заглавља са радњама одбацивања кад год је то могуће или да наведете другу експлицитну радњу одбацивања.
Модални наслов
Модални основни текст иде овде.
Демо уживо
Укључите радну модалну демонстрацију кликом на дугме испод. Клизиће надоле и избледети са врха странице.
Модални наслов
Вау, читаш овај текст у модалном облику!
Статичка позадина
Када је позадина постављена на статичну, модал се неће затворити када кликнете изван њега. Кликните на дугме испод да бисте га испробали.
Модални наслов
Нећу затворити ако кликнете изван мене. Не покушавајте ни да притиснете тастер за излаз.
Померање дугог садржаја
Када модали постану предуги за корисников оквир за приказ или уређај, они се померају независно од саме странице. Испробајте демонстрацију испод да видите на шта мислимо.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Такође можете креирати модал који се може померати и који омогућава померање модалног тела додавањем .modal-dialog-scrollableу .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Вертикално центриран
Додајте .modal-dialog-centeredу да .modal-dialogбисте вертикално центрирали модал.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Користите Боотстрап мрежни систем унутар модала тако што ћете се угнездити .container-fluidунутар .modal-body. Затим користите нормалне класе система мреже као и било где другде.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Различити модални садржај
Имате гомилу дугмади која сви покрећу исти модал са мало другачијим садржајем? Користите event.relatedTargetи ХТМЛ data-*атрибуте (могуће преко јКуери ) да бисте променили садржај модала у зависности од тога на које дугме сте кликнули.
Ако желите, на пример, анимацију за увећање, можете да подесите $modal-fade-transform: scale(.8).
Уклони анимацију
За модале који се једноставно појављују, а не бледе, уклоните .fadeкласу из модалне ознаке.
Динамичке висине
Ако се висина модала промени док је отворен, требало би да позовете $('#myModal').modal('handleUpdate')да бисте поново подесили позицију модала у случају да се појави трака за померање.
Приступачност
Обавезно додајте role="dialog"и aria-labelledby="...", позивајући се на модални наслов, на .modal, и role="document"на .modal-dialogсебе. Поред тога, можете дати опис свог модалног дијалога са aria-describedbyна .modal.
Уграђивање ИоуТубе видео записа
Уградња ИоуТубе видео снимака у модале захтева додатни ЈаваСцрипт који није у Боотстрапу да би се аутоматски зауставила репродукција и још много тога. Погледајте ову корисну објаву Стацк Оверфлов за више информација.
Опционе величине
Модали имају три опционе величине, доступне преко класа модификатора које се постављају на .modal-dialog. Ове величине се појављују на одређеним тачкама прекида да би се избегле хоризонталне траке за померање на ужим прозорима.
Величина
Класа
Модална максимална ширина
Мала
.modal-sm
300px
Уобичајено
Ниједан
500px
Велики
.modal-lg
800px
Екстра велики
.modal-xl
1140px
Наш подразумевани модал без класе модификатора чини модал „средње“ величине.
Extra large modal
...
Large modal
...
Small modal
...
Употреба
Модални додатак укључује ваш скривени садржај на захтев, преко атрибута података или ЈаваСцрипт-а. Такође додаје .modal-openда се <body>заобиђе подразумевано понашање померања и генерише а .modal-backdropда би се обезбедила област клика за одбацивање приказаних модала када се кликне ван модалног.
Преко атрибута података
Активирајте модал без писања ЈаваСцрипт-а. Поставите data-toggle="modal"на елемент контролера, попут дугмета, заједно са data-target="#foo"или href="#foo"да бисте циљали одређени модал за пребацивање.
Преко ЈаваСцрипт-а
Позовите модални са ИД myModal-ом са једном линијом ЈаваСцрипт-а:
Опције
Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-backdrop="".
Име
Тип
Уобичајено
Опис
позадина
боолеан или стринг'static'
истинито
Укључује елемент модалне позадине. Алтернативно, наведите staticза позадину која не затвара модал на клик или на тастер за излаз.
тастатура
боолеан
истинито
Затвара модал када се притисне тастер за излаз
фокус
боолеан
истинито
Ставља фокус на модални када се иницијализира.
Прикажи
боолеан
истинито
Приказује модални када се иницијализира.
Методе
Асинхроне методе и прелази
Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .
Активира ваш садржај као модални. Прихвата опционе опције object.
.modal('toggle')
Ручно пребацује модал. Враћа позиваоцу пре него што је модал заиста приказан или сакривен (тј. пре него што се деси догађај shown.bs.modalили ).hidden.bs.modal
.modal('show')
Ручно отвара модал. Враћа позиваоцу пре него што је модал заиста приказан (тј. пре него што се shown.bs.modalдогађај деси).
.modal('hide')
Ручно сакрива модал. Враћа позиваоцу пре него што је модал заиста сакривен (тј. пре него што се hidden.bs.modalдогађај деси).
.modal('handleUpdate')
Ручно поново подесите позицију модала ако се висина модала промени док је отворен (тј. у случају да се појави трака за померање).
.modal('dispose')
Уништава модални елемент.
Догађаји
Боотстрап-ова модална класа излаже неколико догађаја за спајање на модалну функционалност. Сви модални догађаји се активирају на самом модалном (тј. на <div class="modal">).
Тип догађаја
Опис
схов.бс.модал
Овај догађај се покреће одмах када showсе позове метод инстанце. Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја.
приказано.бс.модал
Овај догађај се покреће када модал постане видљив кориснику (сачекаће да се ЦСС транзиције доврше). Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја.
хиде.бс.модал
Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.модал
Овај догађај се покреће када модал заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
хидеПревентед.бс.модал
Овај догађај се покреће када је приказан модал, његова позадина staticи када се изврши клик изван модала или притиснут тастер Есцапе.