Делаем простое всплывающее окно на сайте

Бывают случаи, когда нужно сделать простое всплывающее окно без подключения различных библиотек, нагружающих страницу.

 

Задача: при клике на определенную ссылу/кнопку/блок и т.д. немного затемнить фон и посередине вывести определенное окно с информацией.

 

1) Скачиваем и подключаем jQuery

 

 

2) HTML

 

Есть две кнопки, при нажатии на которые выполняется функция show_popap(входной_параметр), где входной_параметр — id необходимого всплывающего окна. Например, первая кнопка вызовет «всплывающее окно 1″(у которого id="modal-1").

С вызовом окон все понятно. Как же их закрывать? В примере для этого использован тэг span с классом close_popap. Вы можете использовать любой другой тэг, будь это изображение, иконка или что-то еще. Главное задать для него класс close_popap.

 

3) CSS

 

Изначально подложка (затемнение фона) и само окно скрыто display: none, но при наличии у подложки класса active ей присваивается свойство display:block.

 

4) JS

 

При вызове функции show_popap блоку с id, равному входному значению, добавляется класс active. При нажатии на элемент с классом close_popap у всех блоков с классом overlay удаляется класс active.

 

Дэмо

 

See the Pen Всплывающее окно by webgrind (@webgrind) on CodePen.