Використовуйте модальний плагін JavaScript від Bootstrap, щоб додати на свій сайт діалогові вікна для лайтбоксів, сповіщень користувачів або повністю спеціального вмісту.
Як це працює
Перш ніж розпочати роботу з модальним компонентом Bootstrap, обов’язково прочитайте наступне, оскільки параметри нашого меню нещодавно змінилися.
Модальні створюються за допомогою HTML, CSS і JavaScript. Вони розташовані над усім іншим у документі та видаляють прокручування, <body>щоб натомість прокручувався модальний вміст.
Bootstrap підтримує лише одне модальне вікно за раз. Вкладені режими не підтримуються, оскільки ми вважаємо, що вони не сприяють взаємодії з користувачем.
Модальні використовують position: fixed, що іноді може бути дещо специфічним щодо його рендерингу. За можливості розміщуйте свій модальний HTML у позиції верхнього рівня, щоб уникнути потенційних перешкод з боку інших елементів. Ймовірно, ви зіткнетеся з проблемами під час вкладення .modalв інший фіксований елемент.
Через те, як HTML5 визначає свою семантику, атрибут autofocusHTML не впливає на моди Bootstrap. Щоб досягти такого ж ефекту, використовуйте власний JavaScript:
Продовжуйте читати демонстраційні ролики та інструкції з використання.
Приклади
Модальні компоненти
Нижче наведено статичний модальний приклад (це означає, що його positionта displayперевизначено). Включено модальний заголовок, модальне тіло (потрібно для padding) і модальний нижній колонтитул (необов’язково). Ми просимо вас включити модальні заголовки до дій відхилення, коли це можливо, або надати іншу явну дію відхилення.
Модальний заголовок
Модальний основний текст міститься тут.
Жива демонстрація
Увімкніть робочу модальну демонстрацію, натиснувши кнопку нижче. Він зсунеться вниз і зникне з верхньої частини сторінки.
Modal title
Woohoo, you're reading this text in a modal!
Статичний фон
Якщо тло встановлено на статичний, модальний режим не закриватиметься, якщо клацати поза ним. Натисніть кнопку нижче, щоб спробувати.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
Прокручування довгого вмісту
Коли модальні елементи стають занадто довгими для області перегляду або пристрою користувача, вони прокручуються незалежно від самої сторінки. Спробуйте демонстрацію нижче, щоб зрозуміти, що ми маємо на увазі.
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.
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
Змінний модальний зміст
У вас є купа кнопок, які запускають один і той самий режим із дещо різним вмістом? Використовуйте атрибути HTML (можливо, event.relatedTargetчерез jQuery ), щоб змінювати вміст модального елемента залежно від того, яку кнопку було натиснуто.data-*
Нижче наведено живу демонстрацію, а потім приклади HTML і JavaScript. Для отримання додаткової інформації прочитайте документацію модальних подій , щоб дізнатися більше про relatedTarget.
New message
Змінити анімацію
Змінна $modal-fade-transformвизначає стан трансформації .modal-dialogперед модальною анімацією з настанням, $modal-show-transformзмінна визначає перетворення .modal-dialogв кінці модальної анімації з настанням.
Якщо вам потрібна, наприклад, анімація збільшення масштабу, ви можете встановити $modal-fade-transform: scale(.8).
Видалити анімацію
Для модалів, які просто з’являються, а не зникають під час перегляду, видаліть .fadeклас із модальної розмітки.
Динамічні висоти
Якщо висота модалу змінюється, коли він відкритий, вам слід викликати $('#myModal').modal('handleUpdate'), щоб відрегулювати положення модалу, якщо з’явиться смуга прокручування.
Доступність
Обов’язково додайте aria-labelledby="...", посилаючись на модальний заголовок, до .modal. Крім того, ви можете надати опис свого модального діалогу за допомогою aria-describedbyon .modal. Зауважте, що вам не потрібно додавати, role="dialog"оскільки ми вже додаємо це через JavaScript.
Модальні мають три додаткові розміри, доступні через класи-модифікатори, які розміщуються на .modal-dialog. Ці розміри починаються в певних точках розриву, щоб уникнути горизонтальних смуг прокручування на вужчих вікнах перегляду.
Розмір
Клас
Модальна максимальна ширина
Маленький
.modal-sm
300px
За замовчуванням
Жодного
500px
Великий
.modal-lg
800px
Дуже великий
.modal-xl
1140px
Наш стандартний модальний клас без модифікатора становить модальний «середній» розмір.
Extra large modal
...
Large modal
...
Small modal
...
Використання
Модальний плагін перемикає ваш прихований вміст на вимогу за допомогою атрибутів даних або JavaScript. Це також додає .modal-openдо <body>перевизначення поведінки прокручування за замовчуванням і генерує , .modal-backdropщоб забезпечити область клацання для відхилення показаних модалів під час клацання поза модальністю.
Через атрибути даних
Активуйте модаль без написання JavaScript. Встановіть data-toggle="modal"на елементі контролера, наприклад на кнопці, разом із data-target="#foo"або href="#foo", щоб націлити певний режим для перемикання.
Через JavaScript
Викличте модаль з ідентифікатором 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">).
Тип події
опис
show.bs.modal
Ця подія запускається негайно, коли showвикликається метод екземпляра. Якщо викликано клацанням, клацнутий елемент доступний як relatedTargetвластивість події.
показаний.bs.modal
Ця подія запускається, коли модаль стає видимою для користувача (чекатиме, поки завершаться переходи CSS). Якщо викликано клацанням, клацнутий елемент доступний як relatedTargetвластивість події.
hide.bs.modal
Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.modal
Ця подія запускається, коли модаль закінчується приховуванням від користувача (буде чекати завершення переходів CSS).
hidePrevented.bs.modal
Ця подія спрацьовує, коли відображається модальний, його фон staticі клацання за межами модального або натискання клавіші виходу виконується з параметром клавіатури або data-keyboardвстановленим на false.