Всплывающее окно popup на jQuery (часть 2)
На этом уроке мы будем программировать наше всплывающее popup окно. Нам надо, чтобы при первом заходе пользователя на страницу, popup окно появилось при загрузке страницы и чтобы при повторном заходе, оно некоторое время не показывалось.
Подключим библиотеку jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Весь jQuery код будем писать внутри конструкции метода ready(). Скрипт начнет выполняться только после полной загрузки документа.
$(document).ready(function(){
//весь jQuery код здесь..
});
Сделаем popup окно изначально невидимым.
.popup {
display: none;
}
Теперь нам нужно, чтобы при загрузке страницы окно появилось. Для этого указываем, что мы работаем с идентификатором popup и хотим поменять его CSS свойство display, где мы передаем два параметра: какое свойство мы меняем и его новое значение. Теперь при загрузке страницы данное окно появляется.
$("#popup").css("display","block");
Однако у пользователя должна быть возможность закрыть это popup окно, просто нажав на крестик. Мы имеем дело с классом popup-close и при клике на крестик, сработает функция – окошко должно закрыться вместе с затемнением. Метод fadeout плавно растворит / скроет наше окно за 1 секунду.
$("#popup").fadeOut(1000);
Весь JQuery код
<script>
$(document).ready(function(){
$("#popup").css("display","block");
$(".popup-close").click(function(){
$("#popup").fadeOut(1000);
});
});
</script>
Установка куки (cookies)
Представьте себе вполне реальную ситуацию, что пользователь заходит на ваш сайт каждый день и он уже подписан на вашу рассылку. Не стоит раздражать посетителя, когда он при каждой загрузке страницы, вынужден давить на закрывающий крестик формы подписки, на какое-то время не нужно показывать ему это всплывающее popup окно.
Давайте будем гуманными и выдадим ему куку на два дня, избавим его на некоторое время от навязчивого popup окошка. Для этого наверху HTML-страницы напишем PHP код, который проверит есть ли у этого пользователя кука, а если нет, то установит её.
<?php
if(!isset($_COOKIE['popup']))
{
$value_cookies = "yes";
$popup_cookies setcookie("popup", $value_cookies, time()+172800);
}
?>
Выдаем куку с именем popup, значение будет храниться в переменной $value_cookies и установим время действия куки 2 дня. Создадим условие, проверяющее наличие куки у идентифицированного пользователя, выдавать только тем, у кого её нет, чтобы не выдать куку дважды одному и тому же пользователю. Пользователю с кукой popup окошко не покажется. За проверку отвечает функция isset().
Отправка AJAX-формы на сервер
В случае платных рассылок, форма настраивается по инструкциям этих самых сервисов. Для молодых сайтов с небольшим количеством подписчиков, пока нет смысла пользоваться платными сервисами рассылок. Можно получать е-майлы подписчиков на свою почту и вручную вносить их в свою базу рассылок.
Давайте посмотрим, как нам настроить отправку формы нашего popup окна, применяя технологию AJAX. В статье AJAX-форма без перезагрузки страницы, я подробно об этом рассказываю, ниже и приведу слегка измененный код, именно под нашу форму с одним полем ввода.
HTML файл с формой
<form id="form">
<input type="email" name="email" placeholder="Введите ваш e-mail" required>
<button>Подписаться</button>
</form>
Перед закрывающим тегом body прописываем ссылку.
<script src="send.js"></script>
JavaScript popup.js
Вам надо заменить #form на ваш.
$("#form").submit(function() {
$.ajax({
type: "POST",
url: "popup.php",
data: $(this).serialize()
}).done(function() {
$(this).find("input").val("");
alert("Вы подписаны на нашу рассылку.");
$("#form").trigger("reset");
});
return false;
});
Обработчик данных popup.php
<?php
//Ваш е-мейл для получения данных формы
$recepient = "admin@gmail.com";
$sitename = "Название вашего сайта";
//Пишите в квадратных скобках ваш name=".." из input формы
$email = trim($_POST["email"]);
$message = "Е-майл: $email";
$pagetitle = "Новый подписчик на вашем сайте \"$sitename\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>
Многие новички, тестируя отправку формы, делают это просто в браузере, без сервера. Запомните, что PHP – это серверный язык и без подключения к серверу, форма не отправится.
See the Pen Popup window with subscribe form by porsake (@porsake) on CodePen.
-
Создано 27.02.2019 10:04:47
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.