Примеры javascript модальное окно

Попап на чистом JS. Модальное окно без jQuery

Приветствую, друзья, сегодня я покажу, как создать попап на чистом js. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Так же мы реализуем несколько способов скрытие модального окна. Первый способ — скрытие попап окна при клике на фон, а второй — при клике на крестик. Пример того, что вы получите в итоге, можно посмотреть по ссылке на codepen .

HTML-структура модального окна

Для начала создадим HTML разметку для нашего всплывающего окна на чистом JavaScript. Тут все достаточно просто, так что я просто размещу код. Единственное, что стоит упомянуть — вы можете вместо формы разместить любой HTML код.

Так же вам нужно добавить кнопку, при клике на которую нужно открывать окно. В моем случае, это тег с классом ‘open-popup’ .

Стилизация всплывающего окна на чистом JS

Далее необходимо стилизовать наш попап на чистом js. CSS код так же достаточно простой. Большинство кода это вовсе стилизация формы, которая никак не влияет на само окно. Важный код для урока я вынесу в самое начало вставки с кодом. Так же я отмечу её с помощью комментариев.

/* Важная часть */ .popup__bg < position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; // Скрываем фон и сам попап pointer-events: none; // Запрещаем ему быть целью событий transition: 0.5s all; >.popup__bg.active < // При добавлении класса 'active' opacity: 1; // Показываем фон и попап pointer-events: all; // Возвращаем события transition: 0.5s all; >.popup < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); // Центрируем и масштабируем в 0 само окно background: #fff; width: 400px; padding: 25px; transition: 0.5s all; >.popup.active < // При добавлении класса 'active' transform: translate(-50%, -50%) scale(1); // Так же центрируем и плавно увеличиваем transition: 0.5s all; >/* Конец важной части */ /* Далее код для стилизации формы */ .close-popup < position: absolute; top: 10px; right: 10px; cursor: pointer; >.popup label < width: 100%; margin-bottom: 25px; display: flex; flex-direction: column-reverse; >.popup .label__text < font-size: 14px; text-transform: uppercase; font-weight: 500; color: #cfd0d3; margin-bottom: 5px; >.popup input < height: 45px; font-size: 18px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; >.popup input:focus < border-bottom: 1px solid #2982ff; >.popup input:focus + .label__text < color: #2982ff; >.popup textarea < resize: none; width: 100%; height: 150px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; font-size: 18px; padding-top: 5px; >.popup textarea:focus < border-bottom: 1px solid #2982ff; >.popup textarea:focus + .label__text < color: #2982ff; >.popup button < width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; border: 2px solid #2982ff; background: #2982ff; cursor: pointer; text-transform: uppercase; transition: 0.5s all; >.popup button:hover

Показ всплывающего окна при клике

Теперь переходим к самому интересному. Будем писать JavaScript код для модального окна. Для начала, создадим переменные, в которые мы поместим все DOM-елементы, которые нам понадобятся в будущем.

let popupBg = document.querySelector('.popup__bg'); // Фон попап окна let popup = document.querySelector('.popup'); // Само окно let openPopupButtons = document.querySelectorAll('.open-popup'); // Кнопки для показа окна let closePopupButton = document.querySelector('.close-popup'); // Кнопка для скрытия окна

Далее напишем код, для появления модального окна на чистом JavaScript. Для начала, нужно повесить обработчик события клика ( addEventListener ) на каждую кнопку открытия окна. При клике — указываем, что для фона и для самого окна нужно добавить класс ‘active’ . А так же предотвращаем стандартное поведение браузера, что бы при клике на ссылку браузер не прыгал вверх странички.

openPopupButtons.forEach((button) => < // Перебираем все кнопки button.addEventListener('click', (e) =>< // Для каждой вешаем обработчик событий на клик e.preventDefault(); // Предотвращаем дефолтное поведение браузера popupBg.classList.add('active'); // Добавляем класс 'active' для фона popup.classList.add('active'); // И для самого окна >) >);

Скрытие попап окна при клике на крестик

Тут код очень простой. Указываем, что при клике на крестик, нужно убрать активные классы с фона и самого окна.

closePopupButton.addEventListener('click',() => < // Вешаем обработчик на крестик popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >);

Прячем попап окно на чистом js при клике на фон

Теперь разберемся как спрятать попап при клике на фон. Нужно повесить обработчик клика на весь документ. Далее необходимо передать событие (е). Если цель события (клик) — это фон окна, то мы так же убираем активные классы с фона и окна.

document.addEventListener('click', (e) => < // Вешаем обработчик на весь документ if(e.target === popupBg) < // Если цель клика - фот, то: popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >>);

Спасибо, что прочитали. Если у вас остались вопросы — задавайте их в Telegram-канале или в комментариях на YouTube. Так же буду благодарен, если вы прочитаете другие мои статьи:

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник

Модальные окна на javascript. 30 строк кода

В этой статье мы разберемся как создавать модальные окна с помощью javascript.

Модальные окна которые мы сделаем буду универсальны. Для создания модальных окон в дальнейшем вам не нужно будет дописывать что-то в .js файле.

 Открыть окно 1 Открыть окно 2  
  
Заголовок окна 1
 
 
  
Заголовок окна 2
 
 

/* Стили для подложки */ .overlay < /* Скрываем подложку */ opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 20; transition: .3s all; >/* Стили для модальных окон */ .modal < /* Скрываем окна */ opacity: 0; visibility: hidden; /* Установаем ширину окна */ width: 100%; max-width: 500px; /* Центрируем и задаем z-index */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; /* Должен быть выше чем у подложки*/ /* Побочные стили */ box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2); text-align: center; padding: 30px; border-radius: 3px; background-color: #fff; transition: 0.3s all; >/* Стили для кнопки закрытия */ .modal__cross < width: 15px; height: 15px; position: absolute; top: 20px; right: 20px; fill: #444; cursor: pointer; >/* Стили для кнопок. Мы ведь порядочные разработчики, негоже простые ссылки оставлять */ a

Вот что получилось в итоге ( это скрин, не кликать :)):

1. Зарегистрировать событие клика на элементы с классом js-open-modal
2. При клике на кнопку, ищем модальное окно с таким же атрибутом data-modal, добавляем класс .active подложке и этому модальному окну
3. При клике на крестик удаляем класс у родительского модального окна и подложки

Пишем JavaScript

В начале, повесим на document событие DOMContentLoaded. Это событие сработает когда страница будет загружена.

document.addEventListener('DOMContentLoaded', function() < >);

Затем запишем массив кнопок в переменную используя метод querySelector. Здесь же определим еще 2 переменные: элемент подложки и массив кнопок-крестиков.

document.addEventListener('DOMContentLoaded', function() < var modalButtons = document.querySelectorAll('.js-open-modal'), overlay = document.querySelector('#overlay-modal'), closeButtons = document.querySelectorAll('.js-modal-close'); >); 

Заметьте, modalButtons и CloseButtons мы получаем через querySelectorAll, который возвращает массив, мы сделали это потому что нужно обрабатывать клики по всем кнопка, а вот overlay мы получаем через querySelector, он возвращает один элемент.

В html добавим кнопкам классы .js-open-modal. Мы специально будем использовать новый класс с приставкой js, чтобы не путать стили и интерактивность. Все кто будет работать с кодом увидит, что у класса есть приставка js, значит этот класс используется для интерактивности и его лучше не трогать.

После этого нужно повесить событие клика на каждую кнопку. Для этого мы переберем полученный массив кнопок и повесим обработчик на каждый элемент. Перебирать массив мы будем с помощью forEach:

/* Перебираем массив кнопок */ modalButtons.forEach(function(item)< >);

В переменной item у нас будет храниться текущий элемент цикла. Повесим обработчик на него:

/* Перебираем массив кнопок */ modalButtons.forEach(function(item)< /* Назначаем каждой кнопке обработчик клика */ item.addEventListener('click', function(event) < >); >);

event или e — объект текущего события. В этом объекте хранятся различные методы и данные. При вызове любого события указание аргумента у функции будет ссылаться на этот объект. Зачем нам нужен этот объект? Об этом чуть ниже.

Что нам нужно сделать теперь?

Для начала нужно предусмотреть то, что кнопка, которая вызывает наше модальное окно, может быть ссылкой, кнопкой в форме или другим элементом, который стандартно выполняет какие-то интерактивные действия. Нам нужно отменить эти действия для нормальной работы нашего кода.

Для этого в объекте события есть метод, который предотвращает стандартное действие элемента.

С предотвращением вопрос решили.

У каждой кнопки есть атрибут data-modal, в нем хранится значение, которое находится у модального окна в таком же атрибуте. Наши действия:

1. Получить значение атрибута текущей кнопки
2. Найти модальное окно с помощью этого значения

var modalId = this.getAttribute('data-modal'), modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');

Для того чтобы найти модальное окно, мы пишем определенный селектор, а там где нужно вставить значение, делаем разрыв строки и вставляем значение переменной, соединяя строки используя оператор сложения, в случае со строками, он выполняет их соединение ( конкатенацию).

В итоге получается такой селектор — ‘.modal=[data-modal=»значение переменной»]’ , который и находит наше модальное окно.

Давайте добавим нашему окну и подложке класс active.

modalElem.classList.add('active'); overlay.classList.add('active');

Напишем стили для классов .active:

.modal.active, .overlay.active

Весь javascript код который получился:

document.addEventListener('DOMContentLoaded', function() < var modalButtons = document.querySelectorAll('.js-open-modal'), overlay = document.querySelector('#overlay-modal'), closeButtons = document.querySelector('.js-modal-close'); modalButtons.forEach(function(item)< item.addEventListener('click', function(e) < e.preventDefault(); var modalId = this.getAttribute('data-modal'), modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]'); modalElem.classList.add('active'); overlay.classList.add('active'); >); // end click >); // end foreach >); // end ready

Кнопки должны открывать то модальное окно, к которому привязаны. Проверяем:

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

closeButtons.forEach(function(item) < item.addEventListener('click', function(e) < >); >); // end foreach

При клике на крестик нам нужно у этого же элемента найти родителя или деда с классом .modal и удалить у него класс .active.

Готовой функции для перебора родителей элемента нет. Есть метод который позволяет получить родителя, но это ненадежно, так как разметка может поменяться и наш код сломается.

Для таких задач я не буду писать велосипед, а воспользуюсь готовой микро-библиотекой closest. Код библиотеки:

!function(e)),"function"!=typeof e.closest&&(e.closest=function(e)return null>)>(window.Element.prototype);

Его нужно подключить в отдельном файле или в этом же файле до нашего кода.

Библиотека создает функцию closest. Используя её мы можем искать элемент, который находится выше по дереву и класс которого совпадает с тем который мы ищем.

В нашем случае мы должны найти родителя с классом .modal и не важно является ли он прямым предком или между них есть еще какие-то элементы.

От нашего крестика мы идем вверх и проверяем родителя на класс .modal, не подошел — берем родителя его родителя и опять проверяем, так до самого конца, до window, пока не найдем интересующий нас элемент. В библиотеке jquery такая функция есть изначально, пишется она так же.

closeButtons.forEach(function(item)< item.addEventListener('click', function(e) < console.log(this.closest('.modal')); >); >); // end foreach

При клике на крестик, код выполнился и мы увидели в консоли родителя или деда нашего крестика, элемент с классом.modal. Теперь мы можем убрать у него активный класс, сразу же уберем его и у подложки.

closeButtons.forEach(function(item)< item.addEventListener('click', function(e) < var parentModal = this.closest('.modal'); parentModal.classList.remove('active'); overlay.classList.remove('active'); >); >); // end foreach 

Теперь вы можете создавать много много модальных окон не изменяя свой js код.

Для многих операция jquery является громоздкой библиотекой. Вы можете использовать вместо этого микро-библиотеки. Сборник библиотек — http://microjs.com/.

Еще один полезный сайт который уже в названии говорит что jquery вам может быть и не нужен. http://youmightnotneedjquery.com/

Спасибо за прочтение статьи! Если материал был полезен для тебя — поставь лайк или напиши об этом в комментариях, это займет 1 минуту, это важно для меня. Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Дополнение

По просьбе читателя добавляю код для закрытия модального окна по кнопке ESC и при клике на темный фон.

Закрытие окна при клике на ESC:

document.body.addEventListener('keyup', function (e) < var key = e.keyCode; if (key == 27) < document.querySelector('.modal.active').classList.remove('active'); document.querySelector('.overlay.active').classList.remove('active'); >; >, false);

Здесь мы создали событие нажатия на поднятия клавиш. В документе будут проверяться любые клавиши, нажатые пользователем. В функции мы указываем параметр, который отвечает за событие нажатия.

У событий связанных с клавишами, есть свойство keycode, которое хранит код нажатой клавиши. У ESC этот код — 27.

Нам остается проверять при каждом нажатии код клавиши с кодом ESC и если есть совпадение — удаляем класс у активного окна и фона.

Скрытие при нажатии

Ну тут вы уже сами должны уметь. Не читайте дальше и попробуйте сами подумать и написать этот код. Я сделать пару отступов, чтобы вы не подглядывали.

overlay.addEventListener('click', function() < document.querySelector('.modal.active').classList.remove('active'); this.classList.remove('active'); >);

Создаем событие клика на overlay, эта переменная создана в самом начале. Потом в функции удаляем у активного модального окна активный класс и делаем тоже самое у фона, на который кликнули, за это отвечает переменная this, если переводить — этот.

То есть при клике на фон, мы говорим: «Удали активный класс у окна и у фона, на который кликнули»

Итоговый код

Html

 Открыть окно 1 Открыть окно 2  
  
Заголовок окна 1
 
 
  
Заголовок окна 2
 
 

Css

/* Стили для подложки */ .overlay < /* Скрываем подложку */ opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 20; transition: .3s all; >/* Стили для модальных окон */ .modal < /* Скрываем окна */ opacity: 0; visibility: hidden; /* Установаем ширину окна */ width: 100%; max-width: 500px; /* Центрируем и задаем z-index */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; /* Должен быть выше чем у подложки*/ /* Побочные стили */ box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2); text-align: center; padding: 30px; border-radius: 3px; background-color: #fff; transition: 0.3s all; >/* Стили для кнопки закрытия */ .modal__cross < width: 15px; height: 15px; position: absolute; top: 20px; right: 20px; fill: #444; cursor: pointer; >/* Стили для кнопок. Мы ведь порядочные разработчики, негоже простые ссылки оставлять */ a

Javascript

document.addEventListener('DOMContentLoaded', function() < var modalButtons = document.querySelectorAll('.js-open-modal'), overlay = document.querySelector('#overlay-modal'), closeButtons = document.querySelector('.js-modal-close'); /* открытие окон. */ modalButtons.forEach(function(item)< item.addEventListener('click', function(e) < e.preventDefault(); var modalId = this.getAttribute('data-modal'), modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]'); modalElem.classList.add('active'); overlay.classList.add('active'); >); // end click >); // end foreach /* закрытие окон */ closeButtons.forEach(function(item)< item.addEventListener('click', function(e) < var parentModal = this.closest('.modal'); parentModal.classList.remove('active'); overlay.classList.remove('active'); >); >); // end foreach /* закрытие по ESC */ document.body.addEventListener('keyup', function (e) < var key = e.keyCode; if (key == 27) < document.querySelector('.modal.active').classList.remove('active'); document.querySelector('.overlay.active').classList.remove('active'); >; >, false); /* скрытие окна при клике на подложку */ overlay.addEventListener('click', function() < document.querySelector('.modal.active').classList.remove('active'); this.classList.remove('active'); >); >); // end ready

Источник