Модальные окна без jQuery на чистом JavaScript

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

В этой статье вы узнаете как легко создать модальные окна встроенными средствами библиотек системы управления Cool Grid & Cool JS.

Подключение файлов

Для начала, если Вы еще не подключили Cool-библиотеку, её нужно подключить перед закрывающим тегом head (если вы не изменяли стандартный шаблон CoolCMS - у Вас уже подключены все необходимые файлы):
Вы можете скачать все необходимые файлы по прямым ссылкам https://download.coolcms.ru/js/jcool-3.0.min.js https://download.coolcms.ru/css/gcool-2.7.min.css https://download.coolcms.ru/css/mcool-1.2.min.css
  1. <link rel="stylesheet" href="/css/gcool-2.7.min.css">
  2. <link rel="stylesheet" href="/css/mcool-1.2.min.css">
Так же необходимо подключить JavaScript, желательно разместить его в самом низу сайта, перед закрывающим тегом body:
  1. <script src="/js/jcool-3.0.min.js"></script>

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

После того как все файлы подключены, необходимо создать простую разметку:
  1. <div class="modal modal_1">
  2.     <div class="modal_close">Закрыть</div>
  3.     <div class="modal_box">
  4.         Поздравляем! Ваше модальное окно готово!
  5.     </div>
  6. </div>
  7. <div class="modal modal_2">
  8.     <div class="modal_close">Закрыть</div>
  9.     <div class="modal_box">
  10.         Поздравляем! Вы создали второе модальное окно!
  11.     </div>
  12. </div>
  13. <div class="modal_overlay"><!-- это блок-обертка, в нем не нужно ничего размещать --></div>

Вызов модального окна

После того как разметка Ваших модальных окон готова, нам необходимо разместить на них ссылки:
  1. <button class="modal_open" data-modal=".modal_1">Открыть первое окно</button>
  2. <button class="modal_open" data-modal=".modal_2">Открыть второе окно</button>
Создайте и подключите JavaScript файл и пропишите в него следующий код:
  1. $('.modal_open').on('click', function(){
  2.     $(this.dataset.modal).coolModal({
  3.         action: 'open',
  4.         over: false,
  5.     });
  6. });

Переключение между модальными окнами

Бывают случаи когда необходимо переключаться между модальными окнами. Для этого необходимо добавить кнопки в сами модальные окна:
  1. <div class="modal modal_2">
  2.     <div class="modal_close">Закрыть</div>
  3.     <div class="modal_box">
  4.         <button class="modal_change" data-old=".modal_2" data-new=".modal_1">Закрыть второе и открыть первое окно</button>
  5.     </div>
  6. </div>
В созданный ранее JavaScript файл пропишите следующий код:
  1. $('.modal_change').on('click', function(){
  2.     $(this.dataset.old).coolModal({
  3.         action: 'change',
  4.         new: this.dataset.new
  5.     });
  6. });
Полный список параметров:
  1. action: open - открыть (по умолчанию), change - закрыть текущее и открыть новое
  2. over: css selector подложки - по умолчанию .modal_overlay, false - без подложки
  3. old: css selector закрываемого окна, по умолчанию null, используется совместно с опцией change
  4. new: css selector открываемого окна, по умолчанию null, используется совместно с опцией change
  5. time: время в секундах, по истечении которого окно необходимо закрыть, по умолчанию null
  6. before: функция, которую необходимо вызвать перед изменением состояния окна
  7. callback: функция, которую необходимо вызвать после изменения состояния окна
И напоследок пример показа уведомления (css селектор .modal_event использован для примера):
  1. $('.modal_event').coolModal({
  2.     over: false,
  3.     time: 3
  4. });
Что здесь происходит?:
  1. открывается окно уведомления и закрывается ровно через указанные 3 секунды

В заключении

На этом собственно все! Ваши модальные окна на чистом JavaScript готовы.



Подписывайтесь на обновления и будьте вкурсе всех новинок, а так же делитесь с друзьями в социальных сетях!
20 Мая 2018

Комментарии

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

Комментариев пока нет

^ вверх ^