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

 

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

Шаг 1. HTML

У нас будет контейнер, в котором будет содержаться: заголовок, описание, затем мы добавляем класс для кнопки с классом toggleModal для открытия модального окна:

Затем нам необходимо добавить класс modal is-active, данный класс будет отвечать за вызов модального окна, modal__header отвечает за заголовок и его стилизацию окна.

Простые модальные окна с размытым фоном на CSS3

Шаг 2. CSS

Тепреь перейдем к стилизации, первым шагом станет класс button, который будет отвечать, как вы уже догадались, за кнопки на сайте, мы устанавливаем для него правильные параметры отображения:

Далее мы устанавливам общие параметры дл контейнера, обратите внимание, нам необходимо установить параметры и для медиазапросов, чтобы окно соответствовало размеру разрешения браузера устройства.

Стили достаточно просты, они храняться отдельным файлом и не должны вызвать сложности при их редактировании у разработчика который хоть раз сталкивался с CSS.

Шаг 3. JS

Последним нашом, но не менее важным, станет установка автоматического размытия фона при появлении меню, а также кликабельности ссылок, в этом нам помогут небольшие правила JS:

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

Вот и все. Готово!

Читайте также: