Всплывающее окно при входе на сайт. Как сделать всплывающее окно для сайта при заходе на него

Всплывающее окно при заходе на сайт

Для различных целей может понадобится всплывающее окно на сайте с какой-либо важной информацией. К примеру: акции, подписка, объявления и т.п.

Для реализации будем использовать стандартную библиотеку jquery и jquery.cookie. Окно можно сверстать, но я буду использовать стандартное модальное окно Bootstrap.

Для начало вам понадобится подключить библиотеки jquery и css стили для Bootstrap:

<!-- css Bootstrap -->
<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jquery -->
<script src="https://yastatic.net/jquery/3.1.1/jquery.js"></script>
<script src="https://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>
<script src="https://yastatic.net/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Код HTML всплывающего окна Bootstrap:

<div id="okno" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Всплывающее окно</h4>
</div>
<div class="modal-body">
<p>Здесь может быть ваша реклама :D<p>
</div>
</div>
</div>
</div>

Код JS скрипта для всплывающее окна при первом посещении сайта посетителем:

<script>
$( document ).ready(function() {
//Проверяем если ли в куках запись, что посетитель уже был
if (!$.cookie('good')) {
$("#okno").modal('show'); //метод Bootstrap
}
//создаем куки
$.cookie('good', true, {
expires: 1,
path: '/'
});
});
</script>

Параметр expires — сколько дней будет хранится куки. В нашем примере, посетителю будет выходит всплывающее окно на страницах сайта один раз в день.

Можете также взглянуть на демо и увидеть как это работает.

Читайте также:

Всплывающее окно при входе на сайт. Как сделать всплывающее окно для сайта при заходе на него

Комментарии

Добавить комментарий Отменить ответ