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">&times;</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) {
    // что-то сделать...
})