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


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

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

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

Экономические известия лучшие только тут: Дробаха

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

Шаг 1. HTML

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

<div class="container">
<article>
<h2>Заголовок</h2>
<p>Описание</p>
<div align=right><button class="toggleModal">Открыть статью</button></div>
</article>
</div>
</div>
<div class="modal is-active">
<div class="modal__header">
<div class="inner">
<h2>Заголовок для окна</h2>
</div>
</div>
<div class="modal__content">
<div class="inner">
<p>Вкладки весьма интересная и удобная штука при создании сайта, она позволяет правильно организовать информацию, при этом сэкономив немного места на сайте.
</p>
</div>
</div>
<div class="modal__footer">
<div class="inner">
<button class="toggleModal">Закрыть</button>
</div>
</div>
</div>

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

Шаг 2. CSS

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

button {
background: none;
background-clip: padding-box;
display: inline-block;
border: 0;
user-select: none;
-webkit-touch-callout: none;
-webkit-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

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

.container {
position: relative;
margin:0 auto;
max-width: 960px;
box-sizing: border-box;
padding-top: 40px;
}</p>
article {
background: #fff;
padding: 20px;
margin-bottom: 40px;
border-radius: 5px;
}
.modal {
display: none;
position: fixed;
top: 50%;
width: 100%;
height: auto;
margin-top: -150px;
background-color: $color-white;
border-radius: 3px;
z-index: 999;
box-shadow: 0px 1px 3px 0px darken($color-bg, 10%);

@media #{$small} {
left: 50%;
margin-left: -260px;
max-width: 520px;
}

&.is-active {
display: block;
animation: 1s linear slide;
}
.inner {
position: relative;
padding: 20px;
}
}
.modal__header {
border-bottom: 1px solid darken($color-bg, 5%);
}
.modal__footer {
text-align: center;

button {
display: inline-block;
}
}

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

Шаг 3. JS

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

$('body').addClass('is-blurred');

$('.toggleModal').on('click', function (event) {
event.preventDefault();

$('.modal').toggleClass('is-active');
$('body').toggleClass('is-blurred');
});

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

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

Previous SLIDE OUT SIDEBAR МЕНЮ
Next JS для начинающих. Урок 1.18: Использование регулярных выражений

Suggested Posts

Как ускорить загрузку веб-страниц

Эффект при наведении на заголовок

Модуль для Opencart и Ocstore — сборник

Простой эффект YouTube-меню

Свои стили в WordPress редакторе

Эффективные приемы для респонсивного веб-дизайна