Всплывающее окно popup на jQuery (часть 1)
На этом уроке мы напишем код popup окна с формой подписки, на чистом CSS, совсем не используя графику. Наша цель, с помощью всплывающего popup окна собрать базу подписчиков для будущих рассылок.
В процессе написания кода, подбирайте цвет фона и цвет / размер текста таким образом, чтобы посетитель мог, не напрягая зрение, сходу понять, что ему предлагают. Итак, приступим.
HTML разметка
Первый блок popup служит для затемняющего фона на всю ширину и высоту браузера. Второй блок с классом popup-box – это и есть попап окошко. Внутри второго блока: тег span c юникодом закрывающего крестика, заголовок второго уровня, параграф с текстом и форма с одним полем ввода и кнопкой.
<div id="popup">
<div class="popup-box">
<span class="popup-close">×</span>
<h2>Подписывайтесь на рассылку</h2>
<p>Получайте новые обучающие уроки на свой e-mail.</p>
<form id="form">
<input type="email" name="email" placeholder="Введите ваш e-mail" required>
<button>Подписаться</button>
</form>
</div>
</div>
Вот так выглядит попап без CSS стилизации.
CSS стилизация
Зачем делать затемнение для заднего фона всплывающего окна? Можно и не делать, на функциональности это никак не скажется, однако дизайн и контент сайта могут отвлечь внимание посетителя от целевого действия.
/* Фон с затемнением для popup окна */
#popup {
display: none; /* изначально скрытно */
position: fixed; /* закреплено к верхнему левому углу браузера */
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000; /* Цвет затемнения */
background-color: rgba(0,0,0,0.5); /* Прозрачность затемнения */
}
Ширину окна задаем в процентах, учитывая адаптивность сайта.
/* Попап бокс */
.popup-box {
background: #f8a434;
border: 3px solid #fff;
border-radius: 6px; /* скругленные углы бокса */
margin: 15% auto; /* 15% отступа сверху и снизу окна браузера */
padding: 15px; /* поля между краем бокса и контентом */
border: 1px solid #888;
width: 50%; /* ширина окошка */
}
Закрывающий крестик мы написали юникодом, это значит, что он ведет себя как шрифт, а значит и стили заданы, как для шрифта.
/* Закрывающий крестик */
.popup-close {
color: #aaa;
float: right;
font-size: 26px;
}
При наведении или в фокусе, крестик меняет свой цвет.
.popup-close:hover,
.popup-close:focus {
color: #000;
cursor: pointer;
}
Обратите внимания, что одинаковые стили для input/button, заданы единожды, указав селекторы через запятую.
input, button {
padding: 15px 20px;
border-radius: 2px;
border: 2px solid #bdbdbd;
}
button {
border-color: #616161;
background: #616161;
color: #f6f7f8;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
На CodePen вы можете увидеть весь код целиком и посмотреть, как jQuery код, делает popup окно, взаимодействующим с пользователем.
See the Pen Popup window with subscribe form by porsake (@porsake) on CodePen.
На следующем уроке, мы запрограммируем наше окошко так, чтобы оно появлялось при загрузке страницы. У посетителя сайта будет выбор, подписаться на рассылку и закрыть окно или сразу закрыть окно, не оставляя своего е-майла. Кроме того, вы научитесь отправлять форму AJAX методом.
-
Создано 25.02.2019 10:56:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.