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

jquery easy modal window 620x408 - 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 обертка

jquery example modal window 620x327 - jQuery — простое модальное окно
<!-- Скрытый блок модального окна -->
<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, то теперь мы сами управляем данным процессом

Похожие записи

JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью...
JQ — запретить копирование и вставку
На скриншоте пункт меню «вставить» активен, а в буфере обмена находится текст из поля ниже. Но силами JavaScript команды: «копировать»,...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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