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

Stats: 2911 0
Author: RUDEBOX
Category: Технології
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

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

<h2>Заголовок</h2>

<p>Описание</p>

<div align=right><button class="toggleModal">Открыть статью</button></div>

</article>

</div>

<h2>Заголовок для окна</h2>

</div>

<p>Вкладки весьма интересная и удобная штука при создании сайта, она позволяет правильно организовать информацию, при этом сэкономив немного места на сайте.

</p>

</div>

<button class="toggleModal">Закрыть</button>

</div>

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

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

Шаг 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;
}

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;
}

&amp;.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;
}
}

.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');
});