Простое всплывающее окно с переходами jQuery и CSS3
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>[/code]
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')
});
})
Тема этого окна по закрытию и появлению заключается, что оно просто появляется и быстро приходит в стандартный вид. По закрытию все происходит аналогично, это сжимается и просто остается одна точка, что сразу исчезает.
Демонстрация
Такой вариант окна часто разрабатываются со слоем прозрачности позади, обеспечивая обзор основного экрана, но они также могут занимать весь экран и требовать полного внимания, что полезно для критически важных задач, таких как удаление учетной записи и многих других.
Также можно использовать для рекламы, формы подписки, форм загрузки, форм входа и регистрации или для отображения простого сообщения посетителю.
| 
