При появі модальне вікно затемнює інші елементи й відображається над всією сторінкою. При створенні вікна не забувайте додавати елементи керування, щоб користувач міг його закрити.

На одній сторінці може бути будь-яку кількість вікон, які будуть працювати незалежно один від одного.

Варто зауважити, що атрибут autofocus не буде працювати у спливних вікнах.

Спливні вікна

За роботу модуля відповідає файл modal.js, його можна використовувати окремо або разом з іншими елементами (за замовчуванням він включений до складу файлів bootstrap.js і bootstrap.min.js). Щоб отримати можливість користуватися модальними вікнами, потрібно спочатку підключити jQuery.js, а після цього файл модуля або загальний файл з усіма js-модулями Bootstrap.

модальне вікно bootstrap

Щоб побачити, що таке модальне вікно, натисніть на кнопку:

Код прикладу:

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Показати спливне вікно</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Заголовок вікна</h4>
</div>
<div class="modal-body">Текст повідомлення</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрити</button></div>
</div>
</div>
</div>

Пояснення прикладу

Виклик вікна:

Щоб показати вікно, можна використовувати кнопку або посилання. Вкажіть для них data-* атрибути вікна:

  • data-toggle="modal" показує модальне вікно
  • data-target="#myModal" вказує id вікна, котре треба відкрити

Блок “Modal”, контейнер вікна:

  • Батьківський елемент <div> модального вікна повинен мати id, такий же, як і атрибут data-target у кнопки або посилання, що викликає це вікно, (в даному випадку це myModal).
  • Клас .modal визначає контент вікна.
  • Клас .fade додає ефект плавної появи і затухання вікна. Якщо клас прибрати, вікно буде з’являтися й зникати моментально.
  • Атрибут role="dialog" використовується на пристроях для людей з обмеженими можливостями. Це може бути screen reader, який озвучує контент сторінки для людей, що погано бачать
  • Клас .modal-dialog встановлює ширину і відступи для вікна.

Блок з контентом вікна:

  • елемент з класом .modal-content додає стилі Bootstrap вікну (бордер, колір фону, тіні тощо). Весь контент модального вікна (заголовок, футер, тексти) має знаходитись всередині цього блоку.
  • елемент .modal-header визначає стилі для заголовку спливного вікна. Зверніть увагу: у кнопки <button> всередині цього блоку є атрибут data-dismiss="modal", який використовується, щоб закрити модальне вікно по кліку на кнопці. Клас .close додає стилі кнопці, а клас .modal-title class встановлює стилі для заголовку з потрібною висотою строчки.
  • елемент .modal-body це то, ради чего все затевалось, то є контент спливного вікна. Здесь може бути что угодно: текст, изображения, видео і любые другие html-елементы.
  • .modal-footer використовується для стилізації нижньої частини вікна. Зверніть увагу: за замовчуванням рівняння тексту тут йде за правим краєм.

Розміри вікна

В бутстрапі передбачено три розміри вікна: звичайний, зменшений та великий.

Щоб змінити размер вікна, до елементу з класом .modal-dialog треба додати .modal-sm для зменшеного або .modal-lg для збільшеного розміру вікна:

<div class="modal-dialog modal-sm">

або

<div class="modal-dialog modal-lg">

Закриття по кнопці Esc

Щоб модальне вікно можна було закрити не лише за допомогу кнопки, але й клавішею Esc на клавиатурі, елементу .modal треба додати атрибут tabindex="-1":

<div class="modal fade" tabindex="-1" role="dialog">

Другий варіант: додати атрибут keyboard при виклиці вікна, про це написано нижче.

Виклик спливного вікна

Крім описаного виклику через кнопку або посилання, також є спосіб запуска вікна за допомоги JavaScript:

$('#myModal').modal(options)

Налаштування вікна

Налаштування модальних вікон можна також передавати як через data-атрибути, так і через JavaScript. Для першого випадку, доавайте ім’я опції data- кнопці або посиланню для виклику вікна:

Атрибут Тип За замовч. Опис
backdrop boolean або слово 'static' true Затемнення фону під спливним вікном.

  • true – темний фон
  • false – без затемнення (прозорий фон)

якщо вказати static, то по кліку на темний фон вікно не закриється.

keyboard boolean true Закриття вікна при натисканні кнопки “Escape”

  • true – вікно можна закрити через Esc
  • false – вікно не реагує на кнопку Esc
show boolean true Показ вікна після ініціалізації

Методи Modal.js

Ці методи допоможуть вам мати повний контроль над спливними вікнами: показувати або приховувати або міняти стан залежно від поточного.

Метод Опис
.modal(options) Створює модальне вікно
.modal("toggle") Міняє видимість вікна
.modal("show") Показує вікно
.modal("hide") Приховує вікно

Події Modal.js

Bootstrap дозволяє створювати власні обробники подій модальних вікон. Їх легко налаштувати, є 4 таких події.

Подія Опис
show.bs.modal Подія відбувається відразу, як тільки запускається метод show (показ вікна). Якщо ви запускаєте вікно по кліку, то елемент, на якому був клік, доступний через властивість події relatedTarget.
shown.bs.modal Подія відбувається, коли вікно стало повністю видимим для користувача (всі анімації закінчились).
hide.bs.modal Подія відбувається як тільки запускається метод hide.
hidden.bs.modal Подія відбувається після того, как вікно повністю приховується від користувача (після всіх анімацій).

Приклад події:

$('#myModal').on('hidden.bs.modal', function (event) { 
// функції 
});

В старіших версіях діяла подія remote, але з 4-ї версії її було видалено.

Коменти

Vijit

В этой статье у вас код примера расходится с результатом и описанием.

Сергей

Привет! Почему на мобильном устройстве при нажатии кнопки окно появляется и туже исчезает? то есть только фон затемнён а окна нет при кликанье на пустую область оно опять на доли секунды появляется и исчезает? самое интересно на ПК всё работает? Подскажите где копать!

Сергей

короче на до hide прописать вместо fade затухание