Ниже я покажу как сделать два интересных варианта с модальными окнами, которые созданы при помощи JQuery и CSS. И сделаем красивые эффекты с появлением и исчезновением этих окон. Учитывая сколько их создано, то я постарался подобрать самые оригинальные стили оформления и спецэффекты. Постараюсь сделать всё очень просто и понятно, но при этом чтобы было красиво и функционально.
Немного теории:
Модальные окна — это гибкие всплывающие элементы пользовательского интерфейса, которые располагаются поверх основного интерфейса нашего продукта (сайта), не нарушая основной рабочий процесс пользователей. Модальные окна отлично подходят для приветственных сообщений, предоставляя пользователям общее представление о вашем продукте во время регистрации, анонсы новых функций и практически все сообщения, которые вы хотите передать пользователю в своём приложении или сайте.
1. Всплывающая боковая панель слева и справа
Простое модальное окно, оснащенное плавными переходами на CSS. Можно использовать для просмотра какого-то важного контента при посещении веб-сайта, меню или например как панель настроек.
HEAD
Подключаем, если ещё нет:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
HTML
<div class="container demo">
<div class="text-center">
<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal">
Левая боковая панель
</button>
<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2">
Правая боковая панель
</button>
</div>
<!-- Modal -->
<div class="modal left fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Левая боковая панель</h4>
</div>
<div class="modal-body">
<p>Независимо от того, развивается ли ваш бизнес, или колеса уже какое-то время крутятся, поиск и удержание клиентов - это ключ. И если ваш бизнес не является полностью электронной коммерцией, очень вероятно, что, по крайней мере, некоторая часть вашей клиентской базы - возможно, значительная часть - будет локальной.
</p>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel2">Правая боковая панель</h4>
</div>
<div class="modal-body">
<p>Потребители имеют различные способы поиска товаров и услуг, которые им необходимы, от устройств с голосовой связью, таких как Google Home, до традиционных ПК и, конечно, смартфонов. Мобильные приложения впервые прекратили поиск на рабочем столе в июне 2019 года , и нет никаких оснований полагать, что эта тенденция исчезнет.
</p>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
</div><!-- container -->
CSS
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body,
.modal.right .modal-body {
padding: 15px 15px 80px;
}
/*Left*/
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}
/*Right*/
.modal.right.fade .modal-dialog {
right: -320px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: #EEEEEE;
background-color: #FAFAFA;
}
/* ----- v CAN BE DELETED v ----- */
body {
background-color: #78909C;
}
.demo {
padding-top: 60px;
padding-bottom: 110px;
}
.btn-demo {
margin: 15px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #FFFFFF;
}
.btn-demo:focus {
outline: 0;
}
Здесь все просто, а это вы можете подключить и использовать сразу 2 модальных окна, которые выводятся по сторонам. Для информационного сайта очень удобно, а также можно использовать как какие-то подсказки для пользователя. Все безусловно зависит от тематики сайта. Но часто бывает нужно два разных модальных окна, а тут они уже есть и всё в одной стилистике.
2. Простое и красивое всплывающее окно с переходами на jQuery и CSS
HEAD
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
HTML
<div class="box">
<a class="open">Вызов окна </a>
<div class="content">
<h1>Простой модал с jQuery и CSS3</h1>
<p>Вернемся к нашему примеру с пиццей. Когда потенциальный клиент ищет в Google «пиццу рядом со мной», очень важно, чтобы ваш бизнес показывал как можно более высокие результаты в первые несколько результатов и чтобы была доступна соответствующая информация. Название вашей компании и номер телефона не достаточно. Ваш профиль Google My Business также должен содержать фотографию вашей компании, адрес, часы работы и отзывы. </p>
<a class="close">Закрыть</a>
</div>
</div>CSS
.box {
position: relative;
width: 600px;
height: 450px;
background: #262626;
margin: 20px auto;
box-shadow: 0 10px 10px rgba(0, 0, 0, .5s);
}
a {
text-align: center;
font-size: 24px;
text-decoration: none;
width: 180px;
height: 50px;
line-height: 50px;
border-radius: 25px;
display: block;
cursor: pointer;
}
a.open {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
color: #01BAF2;
border: 2px solid #01BAF2;
}
a.close {
position: relative;
color: #262626;
border: 2px solid #262626;
left: 50%;
transform: translateX(-50%);
}
.content {
position: absolute;
background:#01BAF2;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 50px;
border: 5px solid #262626;
box-sizing: border-box;
transform: perspective(1000px) rotateY(90deg) scale(0);
transition: .5s;
}
.content h1 {
margin: 0;
padding: 0;
color: #fdf2e4;
text-shadow: 0px 1px #232222;
font-size: 23px;
}
.content p {
color: #262626;
}
.active {
transform: perspective(1000px) rotateY(0deg) scale(1);
}JS
$(document).ready(function(){
$('a.open').click(function(){
$('.content').addClass('active');
});
$('a.close').click(function(){
$('.content').removeClass('active')
});
})
Данный вариант окна красиво появляется и исчезает по закрытию. При закрытии окно сжимается и просто остается одна точка, которая сразу исчезает.
Такой вариант модально окна можно использовать для каких-то важных сообщений, которые требуют полного внимания. Оно будет полезно для критически важных задач, таких как создание\удаление учетной записи и подобное. Также можно использовать для рекламы, формы подписки, форм загрузки, форм входа и регистрации или для отображения простого сообщения посетителю.