Користете го модалниот приклучок за JavaScript на Bootstrap за да додадете дијалози на вашата страница за светлосни кутии, кориснички известувања или целосно приспособена содржина.
Како работи
Пред да започнете со модалната компонента на Bootstrap, задолжително прочитајте го следново бидејќи нашите опции од менито неодамна се сменија.
Модалите се изградени со HTML, CSS и JavaScript. Тие се позиционирани над сè друго во документот и го отстрануваат лизгањето од, <body>така што модалната содржина се лизга наместо тоа.
Со кликнување на модалната „заднина“ автоматски ќе се затвори модалот.
Bootstrap поддржува само еден модален прозорец во исто време. Вгнездените модали не се поддржани бидејќи веруваме дека се лоши кориснички искуства.
Модалите користат position: fixed, што понекогаш може да биде малку особено за неговото прикажување. Секогаш кога е можно, поставете го вашиот модален HTML во позиција на највисоко ниво за да избегнете потенцијални пречки од други елементи. Веројатно ќе наидете на проблеми кога вгнездувате .modalво друг фиксен елемент.
Поради тоа како HTML5 ја дефинира својата семантика, атрибутот autofocusHTML нема ефект во модалите на Bootstrap. За да го постигнете истиот ефект, користете некој прилагоден JavaScript:
Продолжете да читате за демо снимки и упатства за користење.
Примери
Модални компоненти
Подолу е статичен модален пример (што значи дека има 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.
Користете го Bootstrap грид системот во модал со вгнездување .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и HTML data-*атрибути (можеби преку jQuery ) за да ја менувате содржината на модалот во зависност од тоа на кое копче е кликнато.
Променливата $modal-fade-transformја одредува состојбата на трансформација на .modal-dialogпред модалната анимација за избледување, $modal-show-transformпроменливата ја одредува трансформацијата на .modal-dialogна крајот од модалната анимација за бледнее.
Ако сакате, на пример, анимација за зумирање, можете да поставите $modal-fade-transform: scale(.8).
Отстранете ја анимацијата
За модали кои едноставно се појавуваат наместо да бледнеат за да ги видите, отстранете ја .fadeкласата од вашата модална ознака.
Динамични висини
Ако висината на модалот се промени додека е отворен, треба да повикате $('#myModal').modal('handleUpdate')за повторно да ја прилагодите позицијата на модалот во случај да се појави лента за лизгање.
Пристапност
Бидете сигурни да додадете role="dialog"и aria-labelledby="...", повикувајќи се на модалниот наслов, на .modal, и role="document"на .modal-dialogсамиот себе. Дополнително, можете да дадете опис на вашиот модален дијалог со aria-describedbyна .modal.
Вградување видеа на YouTube
Вградувањето видеа на YouTube во модали бара дополнителен JavaScript не во Bootstrap за автоматско запирање на репродукцијата и многу повеќе. Погледнете ја оваа корисна објава на Stack Overflow за повеќе информации.
Факултативни големини
Модалите имаат три изборни големини, достапни преку класите на модификатори за да се постават на .modal-dialog. Овие големини влегуваат во одредени точки на прекин за да се избегнат хоризонталните ленти за лизгање на потесни пристаништа за гледање.
Големина
Класа
Модална максимална ширина
Мали
.modal-sm
300px
Стандардно
Никој
500px
Големи
.modal-lg
800px
Многу голем
.modal-xl
1140px
Нашиот стандарден модал без класа на модификатор го сочинува модалот со „средна“ големина.
Extra large modal
...
Large modal
...
Small modal
...
Употреба
Модалниот приклучок ја менува вашата скриена содржина на барање, преку атрибути на податоци или JavaScript. Тој, исто така, го додава .modal-openза <body>надминување на стандардното однесување на лизгање и генерира a .modal-backdropза да обезбеди област за кликнување за отфрлање на прикажаните модали кога се кликнува надвор од модалот.
Преку атрибути на податоци
Активирајте модал без да пишувате JavaScript. Поставете data-toggle="modal"на елемент на контролорот, како копче, заедно со data-target="#foo"или href="#foo"за да насочите конкретен модал за префрлување.
Преку JavaScript
Повикајте модал со id myModalсо една линија JavaScript:
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-, како во data-backdrop="".
Име
Тип
Стандардно
Опис
позадина
бул или стрингот'static'
вистина
Вклучува елемент на модална заднина. Алтернативно, наведете staticзаднина која не го затвора модалот при кликнување или при притискање на копчето за бегство.
тастатура
булови
вистина
Го затвора модалот кога ќе се притисне копчето за бегство
фокус
булови
вистина
Го става фокусот на модалот кога се иницијализира.
покажуваат
булови
вистина
Го прикажува модалот кога е иницијализиран.
Методи
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Ја активира вашата содржина како модална. Прифаќа изборни опции object.
.modal('toggle')
Рачно менува модал. Се враќа на повикувачот пред модалот навистина да биде прикажан или скриен (т.е. пред да се случи настанот shown.bs.modalили hidden.bs.modal).
.modal('show')
Рачно отвора модал. Се враќа кај повикувачот пред всушност да се прикаже модалот (т.е. пред да се shown.bs.modalслучи настанот).
.modal('hide')
Рачно крие модал. Се враќа на повикувачот пред всушност да се скрие модалот (т.е. пред да се hidden.bs.modalслучи настанот).
.modal('handleUpdate')
Рачно прилагодете ја позицијата на модалот ако висината на модалот се промени додека е отворен (т.е. во случај да се појави лента за лизгање).
.modal('dispose')
Уништува модал на елемент.
Настани
Модалната класа на Bootstrap изложува неколку настани за приклучување во модалната функционалност. Сите модални настани се активираат на самиот модал (т.е. во <div class="modal">).
Тип на настан
Description
show.bs.modal
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal
This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed.