г. Владимир, пр. Ленина 15а, офис 410

8 (499) 404-14-01
(телефон офиса)

8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

Иногда требуется такое окно при входе на сайт. Например на сайт табачных изделий, кальянов и другие. Поэтому ниже я выложу информацию о том, как это можно реализовать.

Нам потребуется плагин arcticModal - скачиваем его тут

 

Далее устанавливаем/подключаем его на наш сайт:

  1. <!-- arcticModal -->
  2. <script src="/main/arcticmodal/jquery.arcticmodal.js"></script>
  3. <link rel="stylesheet" href="/main/arcticmodal/jquery.arcticmodal.css">

подключаем сам скрипт и стандартный стиль плагина.

Далее нам нужно подключить плагин cookie от яндекса

  1. <!-- cookie -->
  2. <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

Теперь нужно подключить на страницу форму HTML

  1. <div style="display: none;">
  2. <div class="box-modal" id="boxUserFirstInfo">
  3. <div class="box-modal_close arcticmodal-close">закрыть</div>
  4. <b>У вас уже есть паспорт?!</b><br>
  5. <br>
  6. Надеюсь тебе понравится на нашем сайте!
  7. У нас много интересных товаров.
  8. Добро пожаловать :)
  9. </div>
  10. </div>

А теперь сам скрипт, который все это будет обрабатывать:

  1. <script>
  2. (function($) {
  3. $(function() {
  4. // Проверим, есть ли запись в куках о посещении посетителя
  5. // Если запись есть - ничего не делаем
  6. if (!$.cookie('was')) {
  7. // Покажем всплывающее окно
  8. $('#boxUserFirstInfo').arcticmodal({
  9. closeOnOverlayClick: false,//при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее
  10. closeOnEsc: true
  11. });
  12. }
  13. // Запомним в куках, что посетитель к нам уже заходил
  14. $.cookie('was', true, {
  15. expires: 365, //время хранения куки в днях
  16. path: '/'
  17. });
  18. })
  19. })(jQuery)
  20. </script>

Рекомендую отличный хостинг