jQuery — простое модальное окно

В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта Colibri на CMS WordPress.

Форма обратной связи для этого окна взята отсюда: https://devarts.pro/4386-telegram-jquery-ajax-cookies-send-messages.html

Подключение jQuery modal

Оригинальный скрипт со всеми инструкциями находится тут: https://jquerymodal.com/

Сайт на английском языке, поэтому самые интересные решения распишу тут.

<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

HTML обертка

<!-- Скрытый блок модального окна -->
<div id="ex1" class="modal">
  <h2>Заголовок модального окна</h2>
  <p>Данный абзац откроется в модальном окне</p>
</div>

<!-- Кнопка для вызова модального окна -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>

Больше ничего делать не нужно. Скрипт уже работает и реагирует на параметр REL в HTML ссылке.

Обязательные параметры

1. ID=”EX1″ HTML обертки и HREF=”#EX1″ ссылки должны иметь одинаковые значения. Ссылка с решеткой, а идентификатор — без.
2. Кнопка должна иметь REL=”MODAL:OPEN”.
3. Контейнер обертки должен содержать CLASS=”MODAL”

Альтернативный вызов окна

В моем случае возможности добавить REL в кнопку не было. Это автоматически генерируемый элемент конструктором темы. Благо разработчики плагина предусмотрели такое решение.

Также они заложили возможность добавить сюда плавное появление:

<!-- Скрытый блок модального окна -->
<div id="ex1" class="modal">
  <h2>Заголовок модального окна</h2>
  <p>Данный абзац откроется в модальном окне</p>
</div>

<!-- Кнопка для вызова модального окна -->
<p><a href="#ex1" class="modal-click">Open Modal</a></p>

<script>
//Создаем событие при клике по кнопке
$('.modal-click').click(function(){

   
   //Вызываем метод .modal() который открывает окно
   // добавляем параметр fadeDuration: 250 для более плавного появления окна
   $(this).modal({fadeDuration: 250});

});
</script>

Если в первом способе окно вызвалось бы только при наличии в ссылке параметра REL, то теперь мы сами управляем данным процессом