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 разбор и использование
Добавлено коментариев -  29
  • Анатолий 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, добавьте свой класс в конец и назначте ему необходимую вам ширину.

      Ответить
  • Алексей 28.05.2018 13:07

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

    Ответить
    • Евгений 28.05.2018 20:25

      Если речь идет о динамической странице, то отслеживаете открытие модального окна и навешиваете на это событие Ajax-запрос, который вернет вам с сервера необходимые данные для формирования страницы. Если же речь идет о статической странице, то вы можете вставлять в модальное окно любой HTML-код.

      Ответить
  • Денис 29.05.2018 19:39

    Добрый день. Как сделать модальное окно с подгрузкой шаблона другого документа html. Заранее благодарен.

    Ответить
    • Евгений 30.05.2018 00:06

      Здравствуйте. Используя iframe, будет примерно вот так:

      <div class="modal-body">
          <iframe src="URL-адрес страницы" frameborder="0" width="Ширина" height="Высота"></iframe>
      </div>
      Ответить
  • Елена 25.07.2018 22:42

    Здравствуйте.

    Joomla! 3.8.3 Шаблон по умолчанию, protostar

    Модальное окно на всю ширину экрана и маленьким или большим не делается после добавления

    <div class="modal-dialog modal-sm" role="document">

    Пожалуйста, подскажите решение.

    Во всю ширину оставить можно, но хочется красоты.

    Спасибо.

    Ответить
    • Евгений 26.07.2018 02:33

      Здравствуйте. В вашем шаблоне используются не стандартные, а переопределенные стили бутстрапа, да и версия по моему не четвертая. Вам нужно просто открывать «инструменты разработчика» в браузере, инспектировать стили модального окна и переопределять их.

      У вас сейчас такие стили:

      div.modal {
      	width: 80%;
      	margin-left: -40%;
      }

      если измените на такие:

      div.modal {
      	width: 50%;
      	margin-left: -25%;
      }

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

      Ответить
  • Елена 02.08.2018 18:40

    Здравствуйте.

    Возможно чтобы модальное окно вызывалось по нажатию на заданную картинку?

    Подскажите решение.

    Спасибо

     

    Ответить
    • Евгений 02.08.2018 21:04

      Здравствуйте. Точно также как и с кнопкой. Даете картинке id или class:

      <img id="imageButton" style="cursor:pointer" src="/path/to/image" alt="">

      Вешаете событие клика на картинку и вызываете модальное окно:

      $('#imageButton').on('click', function () {
          $('#exampleModal').modal('show');
      });
      Ответить
      • Елена 03.08.2018 21:46

        Спасибо за участие.

        Вероятно неправильно делаю, неполучается.

        <img id="imageButton" style="cursor:pointer" src="/path/to/image" alt="">

        Эта конструция вместо кнопки?

        Код вставляю в css шаблона Protostar, Bootstrap 3. 

        Ответить
        • Евгений 04.08.2018 13:21

          Да. В атрибут src вместо /path/to/image прописываете путь к картинке.

          Ответить
          • Елена 04.08.2018 17:44

            Другая причина.

            Прописан путь к изображению, клик есть, но модального окна нет.

            код "событие клика на картинку" вставлять в css шаблона?

            • Евгений 05.08.2018 21:10

              Так нужно вызвать модальное окно.

              $('#imageButton').on('click', function () {
                  $('#exampleModal').modal('show');
              });

              Если у вас JS-файл не подключен то просто перед закрывающем тегом body вставте:

              <script>
              $('#imageButton').on('click', function () {
                  $('#exampleModal').modal('show');
              });
              </script>
  • Елена 06.08.2018 08:39

    Большое спасибо за участие.

    Всё работает отлично!

    Ответить
    • Евгений 07.08.2018 16:07

      Пожалуйста. Рад, что у вас все получилось)

      Ответить
  • Александр 11.08.2018 09:31

    Здравствуйте!

    Подскажите, пожалуйста! Есть модальное окно с формой. Нужно сделать автофокус на форме при открытии модального окна.

    Добавил атрибут autofocus к input. Но, фокусировка происходит только после перезагрузке страницы.

    А JS - настройки:

    $('#myModal_1').modal({ 	
    	focus: true
    });

    создает фокус при инициализации.

    А, как сделать так, чтобы автофокус срабатывал при каждом открытии модального окна без перезагрузки страницы?

    Спасибо!

    Ответить
    • Евгений 11.08.2018 14:37

      Здравствуйте! Вам нужно навесить обработчик на событие shown.bs.modal и использовать trigger для поля формы где должен быть фокус.

      $('#exampleModal').on('shown.bs.modal', function() {
      	$('#exampleInput').trigger('focus');
      });
      Ответить
  • Александр 11.08.2018 23:31

    Спасибо, конечно! Но, почему-то, фокусировка срабатывает на доли секунды и пропадает. Модальное окно у меня включается через код:

    $(function () {
        $("#btn_1").click(function () {
            $("#myModal_1").modal('show');
        });
    });
    

    Я в него вставляю код из примера, получается так:

    $(function () {
        $("#btn_1").click(function () {
            $("#myModal_1").modal('show');
        });
    });
    
    $('#myModal_1').on('shown.bs.modal', function () {
        $('#btn_1').trigger('focus');
    });

    Или, я что-то не правильно делаю?

    Ответить
    • Евгений 12.08.2018 00:04

      Фокус вы должны давать текстовому полю (<input>) или (<textarea>) формы, а исходя из вашего кода, вы пытаетесь сделать фокус кнопке, которая вызывает модальное окно:

      $('#btn_1').trigger('focus');

      должно быть так:

      $('текстовое поле формы').trigger('focus');
      Ответить
      • Александр 12.08.2018 12:32

        Спасибо огромное! Все получилось!

        Ответить
        • Евгений 12.08.2018 12:56

          Пожалуйста))

          Ответить
  • Дмитрий 05.09.2018 13:55

    Не открывается окно при нажатии на ссылку, что делать, заранее спасибо.

    <li class="nav-item"> 
        <a href="#" class="nav-link" data-toogle="modal" data-target="#exampleModal">Pricing</a> 
    </li> 
    <div class="modal fade" id="exampleModal" tadindex="-1" role="dialog" aria-labelledby="exampleModal" 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 class="close" type="button" data-dismiss="modal" aria-label="Close"> 
                        <span aria-hidden="true">&times;</span> 
                    </button> 
                </div> 
                <div class="modal-body"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam soluta, sapiente ea recusandae? Eaque maiores sunt, quidem amet veritatis reprehenderit corrupti excepturi, beatae non vel laborum. Vel soluta pariatur tempore quos minus dicta amet libero adipisci</p> 
                </div> 
                <div class="modal-footer"> 
                    <button class="btn btn-secondary" data-dismiss="modal">Close </button> 
                    <button class="btn btn-primary">Save</button> 
                </div> 
            </div> 
        </div> 
    </div>
    Ответить
    • Евгений 05.09.2018 14:50

      У вас опечатка в атрибуте ссылки.
      Исправьте data-toogle="modal" на data-toggle="modal".

      Ответить
      • Дмитрий 06.09.2018 09:06

        Спасибо огромное

        Ответить

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

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