Модальные окна без 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
[code] [/code] Так же необходимо подключить JavaScript, желательно разместить его в самом низу сайта, перед закрывающим тегом body: [code][/code]

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

После того как все файлы подключены, необходимо создать простую разметку: [code] [/code]

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

После того как разметка Ваших модальных окон готова, нам необходимо разместить на них ссылки: [code] [/code] Создайте и подключите JavaScript файл и пропишите в него следующий код: [code]$('.modal_open').on('click', function(){ $(this.dataset.modal).coolModal(); });[/code]

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

Бывают случаи когда необходимо переключаться между модальными окнами. Для этого необходимо добавить кнопки в сами модальные окна: [code][/code] В созданный ранее JavaScript файл пропишите следующий код: [code]$('.modal_change').on('click', function(){ $(this.dataset.old).coolModal({ action: 'change', new: this.dataset.new }); });[/code] Полный список параметров: [code]action - действие open - открыть (по умолчанию), change - закрыть текущее и открыть новое close - закрыть over - css selector подложки .modal_overlay - по умолчанию, false - без подложки old - css selector закрываемого окна, используется совместно с опцией change, false - по умолчанию new - css selector открываемого окна, используется совместно с опцией change, false - по умолчанию time - время в секундах, по истечении которого окно необходимо закрыть false - по умолчанию before - функция, которую необходимо вызвать перед изменением состояния окна false - по умолчанию callback - функция, которую необходимо вызвать после изменения состояния окна false - по умолчанию[/code] И напоследок пример показа уведомления (css селектор .modal_event использован для примера): [code]$('.modal_event').coolModal({ before: function(){ console.log('Сейчас откроется модальное окно'); }, over: false, time: 3, callback: () => console.log('Модальное окно открыто') });[/code] Что здесь происходит?: [code]открывается окно уведомления и закрывается ровно через указанные 3 секунды[/code]

В заключении

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



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

Комментарии

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

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

^ вверх ^