Всплывающее окно при входе на сайт. Как сделать всплывающее окно для сайта при заходе на него
Всплывающее окно при заходе на сайт
Для различных целей может понадобится всплывающее окно на сайте с какой-либо важной информацией. К примеру: акции, подписка, объявления и т.п.
Для реализации будем использовать стандартную библиотеку 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">×</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 - сколько дней будет хранится куки. В нашем примере, посетителю будет выходит всплывающее окно на страницах сайта один раз в день.
Можете также взглянуть на демо и увидеть как это работает.
Читайте также:
- Таблица с фиксированной шапкой на HTML при помощи CSS при скроллинге страницы
- Установка fancybox на сайт (блог) WordPress без плагина
- Мета WordPress: как изменить (редактировать) виджет МЕТА (2 способа)
- Как отключить (запретить) комментарии к записям в WordPress
- Очищаем header от ненужных ссылок. Убираем лишнее из функции wp_head() WordPress
- Как отключить ревизии и автосохранение в WordPress. Как удалить все ревизии записей из базы
- TESTME – плагин тестов для WordPress, создание и установка тестов на блог (сайт)
- Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress