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

Модальное окно – это очень популярный и удобный инструмент, в Bootstrap 4 этот компонент называется «Modal». Содержимым модального окна может быть оформленный текст, видео, изображения, таблицы, очень часто помещают различные формы.

Чаще всего модальное окно показывается при клике по кнопке или ссылке, которая может располагаться в любом месте страницы, и содержать любой необходимый контент, который изначально скрыт и не виден пользователю.

Пример модального окна Bootstrap 4

HTML-код модального окна, которое отображено на картинке выше:

<!-- Кнопка вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Открыть модальное окно
</button>

<!-- Модальное окно -->
<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">Заголовок модального окна</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-info">Любая кнопка</button>
        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
      		</div>
    	</div>
  	</div>
</div>

Кнопке устанавливаются следующие атрибуты: data-toggle со значением modal, которое указывает на вызов компонента «Modal» и data-target, значением которого является идентификатор (ID) открывающегося модального окна.

<!-- Кнопка вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Открыть модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal">
	<!-- ... -->
</div>

Компонент «Modal» имеет свою структуру:

  • обертка – три блока с классами .modal, .modal-dialog и .modal-content;
  • заголовок – блок div с классом .modal-header;
  • контент (основное содержимое) – блок div с классом .modal-body;
  • футер – блок div с классом .modal-footer.
<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      		<div class="modal-header">
        		<h5 class="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-info">Любая кнопка</button>
        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
      		</div>
    	</div>
  	</div>
</div>

Заголовок и футер являются необязательными, при необходимости можно убрать один или сразу оба элемента.

Компонент Modal без заголовка и футера

<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      		<div class="modal-body">
        		Содержимое модального окна
      		</div>
    	</div>
  	</div>
</div>

Из коробки модальное окно поддерживает три размера, стандартный идет по умолчанию, для того чтобы сделать его маленьким, нужно к div с классом .modal-dialog присвоить дополнительный класс .modal-sm, а большим – .modal-lg.

Модальный компонент маленького и большого размера

<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog modal-sm" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog modal-lg" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

Если нужно отключить анимацию при появлении, просто убираем класс .fade у первого div обертки.

<!-- С анимацией -->
<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

<!-- Без анимации -->
<div class="modal" id="exampleModal">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

При появлении компонент «Modal» центрируется по горизонтали и имеет небольшой отступ от верхнего края. Если есть необходимость центрировать его еще и по вертикали, то нужно добавить к div с .modal-dialog класс .modal-dialog-centered.

<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog modal-dialog-centered" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

Дополнительно в HTML-код фреймворком устанавливаются семантические атрибуты HTML5: role="dialog", role="document"aria-labelledby="..." и т.д., это нужно для корректного восприятия экранным диктором или другими пользовательскими агентами, если пользователь не просматривает, а прослушивает страницу, используя вспомогательные технологии. Убирать такие атрибуты  нежелательно.

Управление  Bootstrap 4 Modal с помощью JavaScript

Фреймворк предоставляет альтернативу data атрибутам, а именно: управление поведением модального окна средствами JavaScript. Все достаточно просто: чтобы открыть окно, как обычно отслеживаем событие клика и показываем его.

<!-- Кнопка вызова модального окна -->
<button type="button" class="btn btn-primary" id="btnModal">
	Открыть модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      		<!-- ... -->
    	</div>
  	</div>
</div>

<!-- JavaScript код -->
<script>
$(document).ready(function() {
	// При клике по кнопке, с id="btnModal"
	$("#btnModal").click(function() {
		// Открыть модальное окно с id="exampleModal"
		$("#exampleModal").modal('show');
	});
});
</script>

Фреймворк предоставляет несколько параметров для настройки модального окна, которые можно передавать в метод modal(). Все параметры булева (логического/boolean) типа со значением по умолчанию true. Обратите внимание, что эти параметры также можно передать и через data атрибуты.

  • backdrop – при показе модального окна накладывает темный фон на все содержимое страницы. Значение false отменяет наложение, а "static" запрещает закрытие окна при клике за пределами компонента «Modal».
  • keyboard – закрывает окно, когда пользователь нажимает на кнопку Esc. Для отмены установите значение в false.
  • focus – фокусируется на модальный компонент в тот момент, когда происходит инициализация. Для отмены установите значение в false.
  • show – показывает окно в момент инициализации. Для отмены установите значение в false.
$('#exampleModal').modal({ 
	backdrop: true,
	keyboard: true,
	focus: true,
	show: true
});

Помимо параметров для настройки компонента существуют еще и вспомогательные методы и события.

Методы

  • .modal('toggle') – совершает переключение модального окна в противоположное состояние, то есть показывает его, если скрыто, или скрывает, если открыто.
$('#exampleModal').modal('toggle');
  • .modal('show') – показывает модальное окно.
$('#exampleModal').modal('show');
  • .modal('hide') – скрывает компонент «Modal».
$('#exampleModal').modal('hide');
  • .modal('handleUpdate') – для корректного отображения обновляет позицию модального окна, если его высота изменяется, когда  компонент открыт.
$('#exampleModal').modal('handleUpdate');
  • .modal('dispose') – уничтожает компонент для JavaScript, при этом через data атрибуты все будет работать.
$("#exampleModal").modal('dispose');

События

  • show.bs.modal – сработает при вызове метода show().
$('#exampleModal').on('show.bs.modal', function() {
	// Действие ...
});
  • shown.bs.modal – сработает после завершения работы метода show(), то есть когда окно открыто, и все его CSS-стили загружены.
$('#exampleModal').on('shown.bs.modal', function() {
	// Действие ...
});
  • hide.bs.modal – сработает при вызове метода hide().
$('#exampleModal').on('hide.bs.modal', function() {
	// Действие ...
});
  • hidden.bs.modal – сработает после завершения работы метода hide().
$('#exampleModal').on('hidden.bs.modal', function() {
	// Действие ...
});

Стоит отметить, что если окно было открыто по событию клика, то элемент, открывший его, становится доступным свойством события relatedTarget.

Модальное окно можно наполнять любыми компонентами бутстрана и даже полноценно использовать внутри .modal-body систему сеток фреймворка.

Похожие записи: Bootstrap 4 NavBar: адаптивное меню фреймворка Bootstrap 4 Grid: модульная сетка фреймворка Что нового в Bootstrap 4 и в чем отличие от Bootstrap 3? Bootstrap аккордеон: panel и collapse разбор и использование
Добавлено коментариев -  6
  • Анатолий 24.02.2018 14:06

    Подскажите.

    Как сделать открытие модального окна bootstrap 4 при загрузке страницы

    Ответить
    • Евгений 24.02.2018 23:41

      Здравствуйте. Стандартными средствами jQuery, например так:

      $(window).on('load', function() {
          $('#exampleModal').modal('show');
      });

      Как только загрузится страница сразу покажется модальное окно.

      Ответить
      • Анатолий 26.02.2018 05:01

        Спасибо большое.

        За уроки и за сайт. Сделан очень хорошо.

        Ответить
        • Евгений 26.02.2018 17:02

          Благодарю за добрые слова. Заходите ище!

          Ответить
  • Владислав 08.04.2018 00:41

    Здравствуйте, подскажите как сделать модальное окно на всю ширину страницы?

    Ответить
    • Евгений 08.04.2018 01:03

      Здравствуйте, фреймворк не предоставляет такой возможности, но никто не мешает назначить собственные стили для блока с .modal-dialog, добавьте свой класс в конец и назначте ему необходимую вам ширину.

      Ответить

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности