В этой статье рассмотрим примеры динамического создания и управления модальным окном Bootstrap.

Инструкция по созданию простого модального окна Bootstrap приведена в этой статье.

Модальное окно (HTML-код) не всегда удобно непосредственно размещать на страницах сайта. Т.к. это не только увеличивает размер страницы, но и предусматривает (в большинстве случаев) написания сценария JavaScript по управлению этим окном.

Но используя нижеприведённое решение, вы не только избавитесь от встраивания HTML-кода модального окна в веб-страницу, но и получите более простой контроль над ним.

Код JavaScript для компонента Modal

Нижеприведённый сценарий JavaScript не представляет собой ничего сложного – это обычная функция-конструктор. Она позволяет создавать объекты (модальные окна).

var ModalApp = {};
ModalApp.ModalProcess = function (parameters) {  
  this.id = parameters['id'] || 'modal';
  this.selector = parameters['selector'] || '';
  this.title = parameters['title'] || 'Заголовок модального окна';
  this.body = parameters['body'] || 'Содержимое модального окна';
  this.footer = parameters['footer'] || '<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>';   
  this.content = '<div id="'+this.id+'" class="modal fade" tabindex="-1" role="dialog">'+
    '<div class="modal-dialog" role="document">'+
      '<div class="modal-content">'+
        '<div class="modal-header">'+
          '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
          '<h4 class="modal-title">'+this.title+'</h4>'+
        '</div>'+
        '<div class="modal-body">'+this.body+'</div>'+
        '<div class="modal-footer">'+this.footer+'</div>'+
      '</div>'+
    '</div>'+
  '</div>';
  this.init = function() {
    if ($('#'+this.id).length==0) {
      $('body').prepend(this.content);
    }
    if (this.selector) {
      $(document).on('click',this.selector, $.proxy(this.showModal,this));
    }
  }
}
ModalApp.ModalProcess.prototype.changeTitle = function(content) {
  $('#' + this.id + ' .modal-title').html(content);
};
ModalApp.ModalProcess.prototype.changeBody = function(content) {
  $('#' + this.id + ' .modal-body').html(content);
};
ModalApp.ModalProcess.prototype.changeFooter = function(content) {
  $('#' + this.id + ' .modal-footer').html(content);
};
ModalApp.ModalProcess.prototype.showModal = function() {
  $('#' + this.id).modal('show');
};
ModalApp.ModalProcess.prototype.hideModal = function() {
  $('#' + this.id).modal('hide');
};  
ModalApp.ModalProcess.prototype.updateModal = function() {
  $('#' + this.id).modal('handleUpdate');
};

Чтобы не "засорять" глобальное пространство, создание объектов производится в рамках объекта ModalApp.

Для более удобного подключения данного функционала можете воспользоваться следующими файлами:

  • control-modal.js - не сжатая версия скрипта для динамического создания модальных окон Bootstrap;
  • control-modal.min.js - сжатая (минимизированная) версия скрипта control-modal.js размером 1,49 КБ.

Основные действия с control-modal.js

1. Вставить или подключить этот скрипт к странице. Это необходимо сделать после подключения библиотеки jQuery и js-плагина Bootstrap.

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Подключения скрипта control-modal.min.js к странице -->
<script src="js/control-modal.min.js"></script>

2. Создать объект "Модальное окно" (ModalProcess).

var myModal = new ModalApp.ModalProcess({ id: 'myModal' });

При создании объекта вы можете передать ему не только параметр id, но и другие параметры:

  • title – заголовок модального окна;
  • body – содержимое модального окна;
  • footer – футер модального окна;
  • selector – добавить элементы (селектор), с помощью которых это модальное окно будет открываться.

Пример, как можно создать объект ModalProcess с id, заголовком, телом и селектором:

var myModal = new ModalApp.ModalProcess({
  id: 'myModal',
  title: 'Мой заголовок',
  body: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/bju_FdCo42w?list=PLtK75qxsQaMLZSo7KL-PmiRarU7hrpnwK" allowfullscreen></iframe></div>'
  selector: '.modal-show'
});

Если не указывать параметры, то он создаст модальное окно с параметрами по умолчанию (в качестве id, будет равно modal).

3. После создания объекта, его необходимо "инициализировать". Это действие, в данном случае, просто добавляет модальное окно на страницу (после открывающего тега body).

myModal.init();

Функции для работы с модальным окном

Для работы с модальным окном Bootstrap данный скрипт предоставляет следующие методы:

  • changeTitle – изменить заголовок;
  • changeBody – изменить содержимое тела;
  • changeFooter – изменить футер;
  • showModal – вызвать (отобразить) модальное окно;
  • hideModal – скрыть модальное окно;
  • updateModal – откорректировать положение компонента Modal.

Примеры использования control-modal.js

Рассмотрим различные примеры, в которых разберём как с помощью control-modal.js можно очень просто создавать и управлять модальными окнами Bootstrap.

Использование модальных окон Bootstrap для отображения AJAX контента

1. Создадим 2 простых php-файла ajax.php и other-ajax.php. Эти файлы будут просто возвращать некоторый контент.

Содержимое файла ajax.php:

<?php
// Если  запрос не AJAX (XMLHttpRequest), то завершить работу
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {
  exit();
}
$output['title']='Новый заголовок';
$output['body']='Новое содержимое...';
echo json_encode($output);

Содержимое файла other-ajax.php:

<?php
// Если  запрос не AJAX (XMLHttpRequest), то завершить работу
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {
  exit();
}
$output = 'То же какое-то содержимое...';
echo $output;

2. HTML документ, содержащий 2 кнопки и JavaScript код:

<a href="#" class="modal-show">Открыть модальное окно</a>
<br>
<a href="#" class="modal-show-other">Открыть модальное окно</a>

...

<script>
$(function() {
  var myModal = new ModalApp.ModalProcess({ id: 'myModal', title: 'Мой заголовок' });
  myModal.init();
      
  $('.modal-show').click(function(e){
    e.preventDefault();
    $.get('ajax.php', function(data) {
      var data = JSON.parse(data);
      myModal.changeTitle(data['title']);
      myModal.changeBody(data['body']);
      myModal.showModal();
    });
  });        
  
  $('.modal-show-other').click(function(e){
    e.preventDefault();
    $.get('other-ajax.php', function(data) {
      myModal.changeBody(data);
      myModal.showModal();          
    });        
  });
</script>		 

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

Использование окна для отображения контента data-атрибута

Пример части HTML страницы, в которую добавлены ссылки, имеющие data-атрибуты. При нажатии на ссылку открывается модальное окно, в котором отображается содержимое атрибута data-content этой ссылки.

<button class="btn btn-default modal-show" data-content="Контент...">Показать контент</button>
<button class="btn btn-default modal-show" data-content="Ещё контент...">Показать какой ещё есть контент</button>
<button class="btn btn-default modal-show" data-content="Другой контент...">Показать другой контент</button>

...

<script>
$(function() {
  var myModal = new ModalApp.ModalProcess({ id: 'myModal', title: 'Информация о контенте' });
  myModal.init();
  $('.modal-show').click(function() {
    myModal.changeBody($(this).attr('data-content'));
    myModal.showModal();
  });
});
</script>

Как создать несколько модальных окон

Рассмотрим пример, в котором рассмотрим как очень просто с помощью control-modal.js создать несколько модальных окон Bootstrap:

<!-- Кнопка, открывающая модальное окно 1 -->
<button class="btn btn-default modal-show-1" data-content="Содержимое...">Открыть модальное окно 1</button>
<!-- Кнопка, открывающая модальное окно 2 -->
<button class="btn btn-default modal-show-2" data-content="Другое содержимое...">Открыть модальное окно 2</button> 
    
...

<script>
$(function() {
  // создаём объект "Модальное окно"
  var myModal1 = new ModalApp.ModalProcess({ id: 'myModal1', title: 'Заголовок модального окна 1'});
  myModal1.init();
  // создаём ещё один объект "Модальное окно"  
  var myModal2 = new ModalApp.ModalProcess({ id: 'myModal2', title: 'Заголовок модального окна 2'});
  myModal2.init();
  // при нажатии на кнопки с классом modal-show-1 открываем myModal1
  $('.modal-show-1').click(function(){
    myModal1.changeBody($(this).attr('data-content'));
    myModal1.showModal();
  });
  // при нажатии на кнопки с классом modal-show-2 открываем myModal2   
  $('.modal-show-2').click(function(){
    myModal2.changeBody($(this).attr('data-content'));
    myModal2.showModal();
  });
});
</script>

Как использовать одно модальное окно для видео и изображений

В этом примере рассмотрим, как можно очень просто использовать одно модальное окно для отображения различного контента, такого как видео и изображения.

<div class="text-center">
  <h2>Видео</h2>
  <button class="btn btn-default modal-show" data-title="Linux Sysadmin Basics - Course Introduction" data-content="<div class='embed-responsive embed-responsive-16by9'><iframe class='embed-responsive-item' src='https://www.youtube.com/embed/bju_FdCo42w?list=PLtK75qxsQaMLZSo7KL-PmiRarU7hrpnwK' allowfullscreen></iframe></div>">
    Course Introduction
  </button>
  <button class="btn btn-default modal-show" data-title="Basic Linux Access Control" data-content="<div class='embed-responsive embed-responsive-16by9'><iframe class='embed-responsive-item' src='https://www.youtube.com/embed/WhCIuGjhH-0?list=PLtK75qxsQaMLZSo7KL-PmiRarU7hrpnwK' allowfullscreen></iframe></div>">
    Basic Linux Access Control
  </button> 
  
  <h2> Изображения </h2>
  <button class="btn btn-default modal-show" data-title="Изображение черепахи" data-content="<img class='img-responsive center-block' src='http://itchief.ru/assets/demo/image/image1-400-400.jpg'>">
    Изображение
  </button>
  <button class="btn btn-default modal-show" data-title="Изображение черепахи" data-content="<img class='img-responsive center-block' src='http://itchief.ru/assets/demo/image/image2-400-400.jpg'>">
    Ещё одно изображение
  </button>
</div>
    
...

<script>
$(function() {
  // создаём объект "Модальное окно"
  var myModal = new ModalApp.ModalProcess({ id: 'myModal' });
  myModal.init();
  // при нажатии на элемент с классом modal-show изменяем его заголовок и тело, а затем отображаем его 
  $('.modal-show').click(function(){
    myModal.changeTitle($(this).attr('data-title'));      
    myModal.changeBody($(this).attr('data-content'));
    myModal.showModal();
  });
  // при скрытии модального окна очищаем его содержимое
  $('#'+myModal.id).on('hidden.bs.modal', function (e) {
    myModal.changeBody('');
  });
});
</script>

Скриншоты примера:

Отображение в модальном окне Bootstrap видео с Youtube
Отображение в модальном окне Bootstrap видео с Youtube
Отображение в модальном окне Bootstrap изображения
Отображение в модальном окне Bootstrap изображения

Демонстрация примера доступна по следующей ссылке:

Создание модального окна с помощью js


Статья, связанная с этой темой: Bootstrap - Модальное окно (компонент Modal)