Модален
Използвайте JavaScript модалния плъгин на Bootstrap, за да добавите диалогови прозорци към вашия сайт за лайтбоксове, потребителски известия или напълно персонализирано съдържание.
Как работи
Преди да започнете с модалния компонент на Bootstrap, не забравяйте да прочетете следното, тъй като нашите опции в менюто наскоро бяха променени.
- Модалните са изградени с HTML, CSS и JavaScript. Те са разположени над всичко останало в документа и премахват превъртането от,
<body>
така че модалното съдържание да се превърта вместо това. - Щракването върху модалния „фон“ автоматично ще затвори модала.
- Bootstrap поддържа само един модален прозорец наведнъж. Вложените модали не се поддържат, тъй като смятаме, че създават лошо потребителско изживяване.
- Модалните използват
position: fixed
, което понякога може да бъде малко специфично за изобразяването му. Когато е възможно, поставете своя модален HTML на позиция от най-високо ниво, за да избегнете потенциална намеса от други елементи. Вероятно ще срещнете проблеми, когато влагате a.modal
в друг фиксиран елемент. - Още веднъж, поради
position: fixed
, има някои предупреждения при използването на модали на мобилни устройства. Вижте нашите документи за поддръжка на браузъра за подробности. - Поради начина, по който HTML5 дефинира семантиката си, атрибутът
autofocus
HTML няма ефект в модалите на Bootstrap. За да постигнете същия ефект, използвайте персонализиран JavaScript:
$('#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>
Използване на решетката
Използвайте мрежовата система Bootstrap в рамките на модал чрез влагане .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
и HTML data-*
атрибути (възможно чрез jQuery ), за да променяте съдържанието на модала в зависимост от това кой бутон е щракнат.
По-долу има демонстрация на живо, последвана от примерен HTML и JavaScript. За повече информация прочетете документите за модални събития за подробности относно 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
on .modal
. Имайте предвид, че не е необходимо да добавяте role="dialog"
, тъй като вече го добавяме чрез JavaScript.
Вграждане на видеоклипове в YouTube
Вграждането на видеоклипове в YouTube в модални изисква допълнителен JavaScript, който не е в Bootstrap, за автоматично спиране на възпроизвеждането и др. Вижте тази полезна публикация на Stack Overflow за повече информация.
Размери по избор
Модалите имат три незадължителни размера, достъпни чрез модификаторни класове, които да бъдат поставени в .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>
Използване
Модалният плъгин превключва вашето скрито съдържание при поискване, чрез атрибути на данни или JavaScript. Той също така добавя .modal-open
към <body>
поведението за замяна на превъртане по подразбиране и генерира .modal-backdrop
за предоставяне на зона за щракване за отхвърляне на показаните модали, когато щракване извън модала.
Чрез атрибути на данни
Активирайте модал, без да пишете JavaScript. Задайте data-toggle="modal"
елемент на контролер, като бутон, заедно с data-target="#foo"
или href="#foo"
за насочване към конкретен модал за превключване.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Чрез JavaScript
Извикайте модал с идентификатор myModal
с един ред на JavaScript:
$('#myModal').modal(options)
Настроики
Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-
, както в data-backdrop=""
.
Име | Тип | По подразбиране | Описание |
---|---|---|---|
фон | булево или низ'static' |
вярно | Включва елемент на модален фон. Като алтернатива, посочете static за фон, който не затваря модала при щракване. |
клавиатура | булево | вярно | Затваря модала, когато се натисне клавиш за изход |
фокус | булево | вярно | Поставя фокуса върху модала, когато се инициализира. |
шоу | булево | вярно | Показва модала при инициализиране. |
Методи
Асинхронни методи и преходи
Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
.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')
Унищожава модала на елемент.
събития
Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност. Всички модални събития се задействат в самия модал (т.е. в <div class="modal">
).
Тип събитие | Описание |
---|---|
show.bs.modal | Това събитие се задейства веднага, когато show се извика методът на екземпляра. Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTarget свойство на събитието. |
показано.bs.modal | Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат). Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTarget свойство на събитието. |
hide.bs.modal | Това събитие се задейства незабавно, когато hide методът на екземпляра е извикан. |
скрит.bs.модал | Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат). |
hidePrevented.bs.modal | Това събитие се задейства, когато модалът е показан, неговият фон е static и щракване извън модала или натискане на клавиш за излизане се извършва с опцията на клавиатурата или data-keyboard е зададено на false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})