В этой статье познакомимся со скриптом, предназначенным для динамического создания модальных окон на сайте. Разберём из чего он состоит, как его подключить и использовать.

Что такое модальное окно?

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

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

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

Изображение модального окна:

Вид модального окна, созданного с помощью JavaScript

Модальное окно визуально обычно состоит из заголовка (хедера), основной части и футера.

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

Загрузка и установка модального окна

Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

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

<!-- Подключение CSS файла -->
<link rel="stylesheet" href="modal.css">

<!-- Подключения JavaScript файла -->
<script src="modal.js"></script>

Как создать и вызвать модальное окно?

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице. Это выполняется программно.

Таким образом, для того чтобы создать модальное окно достаточно просто вызвать функцию $modal:

var modal = $modal();

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).

var modal = $modal({
  title: 'Текст заголовка',
  content: '<p>Содержимое модального окна...</p>',
  footerButtons: [
    { class: 'btn btn__cancel', text: 'Отмена', handler: 'modalHandlerCancel' },
    { class: 'btn btn__ok', text: 'ОК', handler: 'modalHandlerOk' }
  ]
});

Все эти ключи являются не обязательными. Если не указать title, то заголовок будет иметь название «Новое окно». Если не установить значению ключу content, то модальное окно в этом случае создатся с пустым содержимым.

Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку. Она задаётся с помощью ключей text, class, handler. С помощью них вы можете соответственно установить кнопке (элементу <button>) текст и значение атрибутов class, data-handler. Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

var modal = $modal({
  title: 'Текст заголовка'
});  

Пример создания модального окна с настройками по умолчанию:

var modal = $modal();

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal.

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

  • show – для отображения модального окна;
  • hide – для скрытия модального окна;
  • destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
  • setContent – для установки контента;
  • setTitle – для установки заголовка.

Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

Рассмотрим, как работать с этими методами на примерах.

Например, метод show используется когда вам необхдимо показать (открыть) модальное окно:

modal.show();

Метод hide применяется для скрытия модального окна:

modal.hide();

Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

modal.setContent('<p>Новое содержимое...</p>');
modal.setTitle('Текст нового заголовка');

В возвращаемом объекте также есть метод destroy. Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

modal.destroy();

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

Примеры использования скрипта для создания модальных окон

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

<button id="show-modal" class="btn">Открыть</button>
<script>
  // создаём модальное окно
  var modal = $modal();
  // при клике по кнопке #show-modal
  document.querySelector('#show-modal').addEventListener('click', function(e) {
    // отобразим модальное окно
    modal.show();
  });
</script>

2. Код, выполняющий открытие одного и того же модального окна при нажатии на любой элемент с атрибутом data-toggle="modal".

<button class="btn" data-toggle="modal">Кнопка 1</button>
<button class="btn" data-toggle="modal">Кнопка 2</button>
<script>
  // создаём модальное окно
  var modal = $modal();
  // при клике на документ
  document.addEventListener('click', function(e) {
    if (e.target.dataset.toggle === 'modal') {
      modal.show();
    }
  });
</script>

3. Пример, в котором показано как можно установить заголовок и содержимое модальному окну через data-атрибуты элемента, с помощью которого оно вызывается.

<button class="btn" data-toggle="modal" data-title="Заголовок 1" data-content="Содержимое модального окна 1...">Кнопка 1</button>
<button class="btn" data-toggle="modal" data-title="Заголовок 2" data-content="Содержимое модального окна 2...">Кнопка 2</button>
<script>
// создаём модальное окно
var modal = $modal();
// при клике на документ
document.addEventListener('click', function (e) {
  if (e.target.dataset.toggle === 'modal') {
    modal.setTitle(e.target.dataset.title);
    modal.setContent(e.target.dataset.content);          
    modal.show();
  }
});
</script>

4. В этом примере покажем, как можно в обработчике события нажатия кнопки, расположенной в футере модального окна, получить элемент с помощью, которого оно было открыто.

<div class="img__items">
  <div class="img__item">
    <img src="/examples/images/car-1.jpg" alt="" data-price="22500" data-name="Audi A5 Coupé">
  </div>
  ...
</div>

<script>
(function () {
  var elemTarget;
  // создаём модальное окно
  var modal = $modal({
    title: 'Просмотр изображения',
    content: '<img src="" alt="" style="display: block; height: auto; max-width: 100%;">',
    footerButtons: [
      { class: 'btn btn__delete', text: 'Удалить', handler: 'modalHandlerDelete' },
      { class: 'btn btn__cancel', text: 'Закрыть', handler: 'modalHandlerCancel' }
    ]
  });
  // при клике на документ
  document.addEventListener('click', function (e) {
    // если мы кликнули на измобржение расположенное в .img__items, то...
    if (e.target.matches('.img__items img')) {
      elemTarget = e.target;
      // устанавливаем модальному окну title
      modal.setContent('<div style="flex: 1 0 60%;"><img src="' + e.target.src + '" alt="' + e.target.alt + '" style="display: block; height: auto; max-width: 100%; margin: 0 auto;"></div><div style="flex: 1 0 40%;"><div style="font-size: 18px; font-weight:bold;">' + e.target.dataset.name + '</div>Цена:<br><b>' + e.target.dataset.price + '$</b></div>');
      modal.show();
    } else if (e.target.dataset.handler === 'modalHandlerCancel') {
      modal.hide();
    } else if (e.target.dataset.handler === 'modalHandlerDelete') {
      elemTarget.parentElement.removeChild(elemTarget);
      modal.hide();
    }
  });
})();
</script>

5. Пример, в котором создадим 2 разных модальных окна. Первое модальное окно будем открывать при нажатии на одни элементы на странице, а второе – при нажатии на другие.

<button class="btn" data-toggle="modal-1">Открыть окно 1</button>
<button class="btn" data-toggle="modal-1">Открыть окно 1</button>  
<button class="btn" data-toggle="modal-2">Открыть окно 2</button>
<button class="btn" data-toggle="modal-2">Открыть окно 2</button> 

<script>
// создадим модальное окно 1
var modal1 = $modal({
  title: 'Модальное окно 1',
  content: 'Содержимое модального окна 1'
});
// создадим модальное окно 2
var modal2 = $modal({
  title: 'Модальное окно 2',
  content: 'Содержимое модального окна 2'
});
// при клике по кнопке #show-modal-1
document.addEventListener('click', function (e) {
  if (e.target.dataset.toggle === 'modal-1') {
    // отобразим модальное окно N1
    modal1.show();
  } else if (e.target.dataset.toggle === 'modal-2') {
    // отобразим модальное окно N2
    modal2.show();
  }
});
</script>

6. Пример всплывающего окна, данные в которое будем загружать через AJAX.

<a href="#" data-json="examples/json/json-1">из json-1</a>
<a href="#" data-json="examples/json/json-2">из json-2</a>
...
<script>
// создадим модальное окно
var modal = $modal({
  title: 'Модальное окно',
});
// при клике по документу
document.addEventListener('click', function (e) {
  // если элемент имеет атрибут data-json, то...
  if (e.target.dataset.json) {
    e.preventDefault();
    // выполним AJAX запрос на сервер по адресу определяемым значением атрибута data-json
    var request = new XMLHttpRequest();
    request.open('GET', 'https://itchief.ru/' + e.target.dataset.json);
    request.send();
    request.onload = function () {
      if (request.status == 200) {
        // если запрос успешный, то обработаем полученный ответ (который нам, например, приходит в формате JSON) и сформируем контент, который затем установим в качестве соержимого модального окна  
        var
          data = JSON.parse(request.response),
          content = '<div style="flex: 1 0 60%;"><img src="{{image}}" alt="" style="display: block; height: auto; max-width: 100%; margin: 0 auto;" width="705" height="440"></div><div style="flex: 1 0 40%;"><div style="font-size: 18px; font-weight:bold;">{{title}}</div>Цена:<br><b>{{price}}</b></div>',
          result;
        result = content.replace('{{title}}', data.title);
        result = result.replace('{{price}}', data.price);
        result = result.replace('{{image}}', data.image);
        modal.setContent(result);
        // отобразим модальное окно
        modal.show();
      }
    };
  }
});
</script>

Пример содержимого файла «json-1»:

{"title":"Audi A5 Coupé","price":"22500$","image":"https://itchief.ru/examples/images/car-1.jpg"}

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

<!-- Кнопки для открытия модального окна -->
<button id="show-1" class="show" data-toggle="modal">show-1</button>
<button id="show-2" class="show" data-toggle="modal">show-2</button>
<!-- Элементы, которые будем использовать для вывода различных сообщений связанных с изменениями состояния модального окна -->
<div class="message"></div>
<div class="actions"></div>

...
<script>
(function () {
  var elemTarget;
  var modal = $modal({
    title: 'Текст заголовка',
    content: '<p>Содержмиое модального окна...</p>',
    footerButtons: [
      { class: 'btn btn-2', text: 'ОК', handler: 'modalHandlerOk' },
      { class: 'btn btn-1', text: 'Отмена', handler: 'modalHandlerCancel' }
    ]
  });
  document.addEventListener('show.modal', function (e) {
    document.querySelector('.actions').textContent = 'Действия при открытии модального окна...';
    // получить ссылку на DOM-элемент показываемого модального окна (.modal)
    console.log(e.detail);
  });
  document.addEventListener('hide.modal', function (e) {
    document.querySelector('.actions').textContent = 'Действия при закрытии модального окна...';
    // получить ссылку на DOM-элемент скрываемого модального окна (.modal)
    console.log(e.detail);
  });
  document.addEventListener('click', function (e) {
    if (e.target.dataset.toggle === 'modal') {
      elemTarget = e.target;
      modal.show();
      modal.setContent('Вы открыли модальное окно посредством нажатия на кнопку <b>' + e.target.textContent + '</b>');
    } else if (e.target.dataset.handler === 'modalHandlerCancel') {
      modal.hide();
      document.querySelector('.message').textContent = 'Вы нажали на кнопку Отмена, а открыли окно с помощью кнопки ' + elemTarget.textContent;
    } else if (e.target.dataset.handler === 'modalHandlerOk') {
      modal.hide();
      document.querySelector('.message').textContent = 'Вы нажали на кнопку ОК, а открыли окно с помощью кнопки ' + elemTarget.textContent;
    } else if (e.target.dataset.dismiss === 'modal') {
      document.querySelector('.message').textContent = 'Вы закрыли модальное окно нажав на крестик или на область вне модального окна, а открыли окно с помощью кнопки ' + elemTarget.textContent;
    }
  });
})();
</script>