Модальное окно на затемненном фоне

Модальные окна можно выводить с помощью множества плагинов такие, как fancybox, Bootstrap и т.д. Мы рассмотрим пример статического модального окна, всплывающего по клику, на собственном коде.

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

Затемнение фона на CSS

Для того чтобы затемнить фон сайта достаточно добавить в верстку блок div с определенными CSS стилями к нему:

CSS стиль задается псевдоклассом ":before" и выставляем прозрачность opacity, тем самым before не влияет на контент, который находится в данном блоке. Полупрозрачный фон растягивается на всю область браузера.

CSS верстка модального окна

Добавляем в блок div.popup-black, ссылку «закрыть».

События открытия/закрытия всплывающего окна на jQuery

Вывод всплывающего окна по клику

Для выполнения popup эффекта достаточно скрыть блок .popup-black и добавить event (событие) на открытие окна.