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, то теперь мы сами управляем данным процессом

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



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

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