Bootstrap 4.1 – модальное окно
Добро пожаловать! При построении модальных окошек используются HTML, JS, и CSS. Они выводятся поверх всего контента, при этом скролл работает только внутри всплывающего окна.
Чаще всего bootstrap modal состоит из 3 областей:
- Header - верхняя часть
- Body - тело модального окна
- Footer (опциональная часть, можно использовать, а можно и - нет) - нижняя область модального окна (подвал)
Во! Задачка?!
Давайте для себя поставим интересную задачку: сделать кнопку, по клике на которую в всплывающем окне будет показываться видео ролик с YouTube.
Для того, чтобы использовать модальные окошки, вы должны подключить JavaScript библиотеку, в противном случае, код работать не будет. Ссылка на js здесь: https://www.bootstrapcdn.com/
Для начала создадим index.html Подключим там CDN необходимые файлы библиотеки (это самый быстрый вариант, чтобы без заморочек начать разработку)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
Создадим “заготовку” для решения нашей задачи.
<!-- 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
Контент внутри может быть любой. В тег с классом modal-body вы можете вкладывать все, что угодно: сетку, tooltips, tabs и много всего остального. Но при этом помните, что одновременно нельзя открыть несколько модальных окошек.
Давайте добавим в область “modal-body” код для проигрывания видео с youtube:
Должно получиться как-то так:
<div class="modal-body">
<iframe width="465" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Добавим разнообразие в контент
Благодаря data-* полям можно построить интересные варианты взаимодействия с пользователем. Принцип следующий: вы вешаете на кнопку это поле и передаете в нем какой-нибудь параметр. В нашем случае мы будем передавать ссылку на видео, и наша кнопка будет выглядеть вот так:
<a href="#theModal" class="nav-link" data-remote="https://www.youtube.com/embed/CS8IC5LXqIw" data-toggle="modal" data-target="#theModal">Modal</a>
Как вы видите, в атрибут data-remote мы передаем ссылку на youtube видео. Для того, чтобы заставить ее работать, надо добавить JS код:
<script type="text/javascript">
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('iframe').attr('src', button.data("remote"));
});
</script>
Все работает следующим образом: как только модальное окно откроется show.bs.modal, мы достаем значение из data-* атрибута. Благодаря конструкции e.relatedTarget, позже, мы сможем получить значения нужных атрибутов, а затем уже обратиться к конкретному .data("remote") (нас интересует remote). Далее идет классический jQuery код. Я думаю, его пояснять не нужно ;)
Теперь, давайте, создадим побольше кнопок и посмотрим результат:
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#theModal" class="btn btn-success"
data-remote="https://www.youtube.com/embed/KPN2Uh_HRCg?autoplay=1"
data-toggle="modal" data-target="#theModal">HTC</a>
<a href="#theModal" class="btn btn-success"
data-remote="https://www.youtube.com/embed/779KwjAYTeQ?autoplay=1"
data-toggle="modal" data-target="#theModal">SAMSUNG</a>
<a href="#theModal" class="btn btn-success"
data-remote="https://www.youtube.com/embed/sbios0u2Px8?autoplay=1"
data-toggle="modal" data-target="#theModal">IPHONE</a>
</div>
Кстати, к ссылкам можно добавить параметр ?autoplay=1, тогда видео будет сразу загружаться при открытии.
Если у вас возникли сложности, весь листинг в моем репозитории на gitHub
Дополнительные плюшки
Модальным окнам можно задать размеры. Их бывает несколько типов :
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-sm">
задавать нужно в блок с классом modal-dialog
Наверняка вы найдете семантические атрибуты, такие как role, aria-labelledby. Они нужны для стороннего софта (не заморачивайтесь).
Методы
.modal('toggle')
Переключает модальное окно в противиположное состояние.
$('#myModal').modal('toggle')
.modal('show')
Показывает. Метод срабатывает до фактического открытия модального окна.
$('#myModal').modal('show')
.modal('hide')
Скрывает.
$('#myModal').modal('hide')
.modal('handleUpdate')
Регулирует положение модального окна, если изменяется его высота. Например, если появляется полоса прокрутки.
$('#myModal').modal('handleUpdate')
.modal('dispose')
Уничтожает компонент.
Опции
Опции можно задать в data атрибутах либо при инициализации плагина в JS.
- backdrop - эта опция отвечает за задний фон. Значение false полностью его отменяет, static - вы не сможете закрыть модальное окно, кликнув по заднему фону, true - по умолчанию. Задний фон есть, и при клике по нему закрывается модальное окно.
- keyboard - при клике по клавише esc модальное окно закрывается, значение true активирует свойство (по умолчанию задано), false - отменяет
- focus - фокус перемещается на модальное окно, false - отменяет данное свойство
- show - после инициализации модального окна показывает его
Пример в js выглядит вот так:
$('#exampleModal').modal({
backdrop: true,
keyboard: true,
focus: true,
show: true
});
А пример с data полями вот так:
<a data-backdrop=”static” href="#theModal" class="nav-link" data-remote="https://www.youtube.com/embed/779KwjAYTeQ?autoplay=1" data-toggle="modal" data-target="#theModal">Modal</a>
События
- show.bs.modal - срабатывает сразу после вызова метода show()
- shown.bs.modal - событие сработает, когда модальное окно будет полностью видно для пользователя (завершатся все CSS анимации)
- hide.bs.modal - срабатывает сразу после вызова метода hide()
- hidden.bs.modal - событие сработает когда модальное окно полностью исчезнет (завершатся все CSS анимации)
$('#myModal').on('hidden.bs.modal', function (e) {
// что-то сделать...
})
Облако тегов
Следующая статья
Шаблон на основе сетки Masonry с возможностью скролла
В сегодняшнем уроке я бы хотел поделиться с вами шаблоном на основе сетки Masonry, который имеет прикольную анимацию при на ведении, а при открытии контент заполняет всю область экрана с возможностью прокрутки. После того как сделан клик по элементу, изображение плавно перемещается в центр страницы и подстраивается под размеры. Задний фон также масштабируется, заполняя всю область страницы. Отображаемый контент замечательно прокручивается и может вместить неограниченное количество текста. Анимация создана с использованием технологии TweenMax.