Всплывающее окно jquery на сайте
На сайтах, особенно интернет-магазинах, нажатие кнопок хотелось бы сопровождать всплывающим окном посетителей. В этой статье я покажу как сделать такое модальное окно на jQuery по центру окна браузера при нажатии на кнопку.
Наше окошко будет плавно появляться и исчезать через 4 секунды, а также иметь кнопку, закрывающую всплывающее окно на сайте сразу же по желанию посетителя.
Наша html разметка будет достаточно простой, это кнопка и само окошко:
<button>Нажми меня</button>
<div class="success">
Это всплывающее уведомление
</div>
В стилях мы скроем окошко свойством display: none и придадим остальным элементам красивый вид:
body {
margin: 0;
background: #CFCFCF;
width: 100%;
}
button{
border: 0;
background: red;
padding: 20px;
color: #fff;
text-transform: uppercase;
margin: auto;
cursor: pointer;
transition: 1s ease;
border-radius: 5px;
margin-top: 100px;
width: 300px;
display: block;
outline: none;
}
button:hover{
background: #656565;
}
.success{
display: none;
position: fixed;
padding: 20px 20px 20px 50px;
background: rgba(246, 246, 246, 0.8);
border-radius: 15px;
z-index: 10;
width: 340px;
line-height: 20px;
}
.success::before{
content: "✓";
font-size: 30px;
font-family: sarif;
float: left;
display: block;
line-height: 40px;
width: 40px;
height: 40px;
text-align: center;
font-weight: 600;
color: rgb(0, 201, 169);
margin-right: 20px;
position: absolute;
top: 0;
left: 0;
}
.close {
margin-left: 10px;
height: 10px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}Выше описаны стили как для всплывающего окна, так и для самой кнопки и тела сайта.
А теперь самое важное. Это наш небольшой код скрипта:
jQuery(function($) {
$('button').click(function(){
$('.success').append('<div class="close">☓</div>');
$('.success').fadeIn('slow');
$('.success').css('top',($(window).height()-$('.success').outerHeight())/2 + 'px');
$('.success').css('left',($(window).width()-$('.success').outerWidth())/2 + 'px');
function windowClose(){
$('.success').fadeOut('slow');
};
setTimeout(function(){windowClose()}, 4000);
$('.close').click(function(){
windowClose();
});
});
});
Немного поясню. Наши всплывающие окна появляются по центру экрана при нажатии на кнопку button. При клике нашему html коду добавляется кнопка Close, при клике по которой пользователь может сразу закрыть всплывающее окно (за это отвечает функция windowClose()). Далее мы инициализируем плавное появление и выравниваем наше всплывающее окно по центру экрана и ставим таймаут на его исчезновение 4 секунды (в скрипте это прописано как 4000 миллисекунд). После чего наше всплывающее окно плавно исчезает.
