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

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

В этой статье я расскажу и покажу как создать модальные окна встроенными средствами.

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

Для начала, если Вы еще не подключили Cool-библиотеку, её нужно подключить перед закрывающим тегом head (если вы не изменяли стандартный шаблон CoolCMS - у Вас уже подключены все необходимые файлы):
  1. <link rel="stylesheet" href="//cdn.coolcms.ru/css/cool-2.4.min.css">
  2. <link rel="stylesheet" href="//cdn.coolcms.ru/css/cool_modal-1.2.min.css">
Так же необходимо подключить JavaScript, желательно разместить его в самом низу сайта, перед закрывающим тегом body:
  1. <script src="//cdn.coolcms.ru/js/jcool-2.6.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. <div class="btn modal_open" data-modal=".modal_1">Открыть первое окно</div>
  2. <div class="btn modal_open" data-modal=".modal_2">Открыть второе окно</div>
Создайте и подключите JavaScript файл и пропишите в него следующий код:
  1. $('.modal_open').on('click', function(e){
  2. fn.modal({
  3. action: 'open',
  4. box: e.target.dataset.modal,
  5. over: false,
  6. });
  7. });
Расскажу немного подробнее что происходит в функции fn.modal:
  1. action - действие (open - открыть (по умолчанию, указывать action: open не обязательно), close - закрыть, change - сменить)
  2. box - собственно класс нужного окна
  3. over - подложка, true - подложка включена (по умолчанию параметр включен, указывать over: true не обязательно), false - без подложки (over: false указывается если Вам не нужна подложка)
  4. closed - время, по истечении которого окно закроется, если параметр не указан, соответственно окно не закроется

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

Бывают случаи когда необходимо переключаться между модальными окнами, на этот случай я так же все продумал. Необходимо добавить кнопки в сами модальные окна:
  1. <div class="modal modal_2">
  2. <div class="modal_close">Закрыть</div>
  3. <div class="modal_box">
  4. <div class="btn modal_change" data-old=".modal_2" data-new=".modal_1">Закрыть второе и открыть первое окно</div>
  5. </div>
  6. </div>
В созданный ранее JavaScript файл пропишите следующий код:
  1. $('.modal_change').on('click', function(e){
  2. fn.modal({
  3. action: 'change',
  4. old: e.target.dataset.old,
  5. new: e.target.dataset.new,
  6. over: false,
  7. });
  8. });
И напоследок пример показа уведомления:
  1. fn.modal({
  2. box: '.modal_event',
  3. over: false,
  4. close: 3
  5. });
  6. });
Что здесь происходит?:
  1. открывается окно уведомления и закрывается ровно через указанные 3 секунды

В заключении

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



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

Комментарии

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

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