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

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

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

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

<button class="btn btn-info btn-md" 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" озвучує вміст сторінки.
  • Клас .modal-dialog встановлює ширину і відступи для вікна.

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

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

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

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

Щоб змінити розмір вікна, до елементу з класом .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 дозволяє створювати свої обробники подій модальних вікон. Їх дуже легко налаштувати. Існує чотири таких події.

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

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

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

Наступний урок (Урок №13: Створення вкладок і табів)

Перелік усіх уроків


 Похожие публикации
2016-05-31 • Просмотров [ 74 ]