Всплывающее окно. Pop-up на jQuery.
На данный момент ни один современный, качественный сайт не может обойтись без использования JavaScript. Этот язык даёт очень многое, модифицирует и делает лучше любой проект. Но писать на чистом JS порой бывает трудно и долго. Для значительного облегчения объёма работы и времени потраченного на неё, была создана библиотека jQuery. Сегодня мы рассмотрим пример использования jQ, и сделаем всплывающее окно (довольно полезное и красивое дополнение к сайту).
Для начала напишем HTML код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Popup Show</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
</div>
<div class="overlay_popup"></div>
<div class="popup" id="popup1">
<div class="object">
<form action= "" method= "">
<p>Имя: </p>
<p><input type= "text" name= "name"></p>
<p>E-mail: </p><p> <input type= "text" name= "email"></p>
<p>Сообщение: </p>
<p><textarea rows= "10" cols= "45" name= "message"></textarea></p>
<input type= "submit" value= "Отправить">
</form>
</div>
</div>
<script src="jquery/jquery-1.11.2.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Тут всё просто, теперь нам нужно написать стили для нашей кнопки, всплывающего окна и фона, на котором будет эффект затемнения. Собственно, вот и код:
textarea {
width: 100%;
resize: none;
}
/* Ставим кнопку по центру */
.content {
text-align: center;
}
/* Стили для нашей кнопки */
button {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
border: 0;
}
button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
button:focus {
outline: none !important
}
/* Стили для содержимого popup окна */
input, textarea {
color: #494949;
border: 1px solid #e3e3e3;
border-radius: 3px;
background: #fff;
font-size: 14px;
margin: 0 0 10px;
padding: 5px;
width: 100%;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
}
input:focus {
border-color: #808080;
outline: none;
}
textarea:focus {
border-color: #808080;
outline: none;
}
/* Кнопка */
.blue_btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
/* Окно */
.overlay_popup {
display:none;
position:fixed;
z-index: 999;
top:0;
right:0;
left:0;
bottom:0;
background:#000;
opacity:0.5;
}
.popup {
display: none;
position: relative;
z-index: 1000;
margin:0 25% 0 25%;
width:50%;
}
/* Ещё немного стилей для popup окна */
.object{
width: 500px;
height: 500px;
background-color: #eee;
padding: 50px 70px;
}
Отлично! Красивая кнопка, приличный блок (pop-up окно) и пока что, бесполезный блок с затемнением. Осталось написать только небольшой кусок кода - и всё прекрасно!
$('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку
var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id
$(popup_id).show(); // Открываем окно
$('.overlay_popup').show(); // Открываем блок заднего фона
})
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
$('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})
Готово! Всё прекрасно работает, красиво на вид, и очень полезно! Результат работы можно посмотреть здесь: Pop-up окно на jQuery
Задавайте вопросы и высказывайте своё мнение в комментариях!
-
Создано 23.08.2017 08:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.