Bootstrap 4.1 – модальное окно

  • 27 сентября 2018
  • 4327
0%

Помогло?

Добро пожаловать! При построении модальных окошек используются 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) {
    // что-то сделать...
})

Облако тегов

Следующая статья

Шаблон на основе сетки Masonry с возможностью скролла

В сегодняшнем уроке я бы хотел поделиться с вами шаблоном на основе сетки Masonry, который имеет прикольную анимацию при на ведении, а при открытии контент заполняет всю область экрана с возможностью прокрутки. После того как сделан клик по элементу, изображение плавно перемещается в центр страницы и подстраивается под размеры. Задний фон также масштабируется, заполняя всю область страницы. Отображаемый контент замечательно прокручивается и может вместить неограниченное количество текста. Анимация создана с использованием технологии TweenMax.

Сообщения: (4)

?
Публикуя сообщение, вы соглашаетесь с пользовательским соглашением
ААлексей1 год назад
А как сделать несколько модальных окон на одной странице? Например, одинакового размера и содержащие одинаковые формы, но с разными заголовками и текстами.
Ответить
?
Публикуя сообщение, вы соглашаетесь с пользовательским соглашением
Скрыть ответы: (1)
ААдминистратор1 год назад
Решений у этой задачи много, но я бы стал решать ее на уровне js. HTML содержит один контейнер, а при клике по кнопкам у вас происходит различная логика обработки события. То есть, получается, что на странице у вас одно модальное окошко, а с помощью ajax вы передаете разные данные по параметру. Например, от параметра "A" будет зависеть заголовок, форма и текст, а от "B" - совсем другие данные уходить в модальное окошко. Таким образом, после каждого клика данные будут обновляться на новые.
Ответить
ССергей1 год назад
Что бы при закрытии модального окна видео переставало играть, предлагаю добавить еще одну переменную

var youtube_src = $("#theModal iframe").attr("src");
$("#theModal").on('hidden.bs.modal', function (e) {
$("#theModal iframe").attr("src", null);
});
Ответить
?
Публикуя сообщение, вы соглашаетесь с пользовательским соглашением
Скрыть ответы: (1)
ААдминистратор1 год назад
Очень большое спасибо за комментарий. Это будет отличным дополнением к статье ;)
Ответить

Читайте также