<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Всплывающее окно popup на jQuery (часть 2)

Всплывающее окно 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.