Всплывающее окно, которое показывается 1 раз

1. Нужно скачать библиотеки:

2. Подключить Jquery, если не подключена, добавив в тег «head»:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

3. Подключить скачанные библиотеки в теге «head», указав свои пути:

<link href="/css/magnific-popup.css" rel="stylesheet" />
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/jquery.cookie.js"></script>

3. Добавить в конец страницы код вызова функции:

<script>
jQuery(document).ready(function($) {
  var cookieOptions = { expires: 30, path: '/' };
  if ($.cookie('visit') == undefined || $.cookie('visit') !== undefined) {
    setTimeout(function() {
$('#sidebar-window-wrap').show();
    $.magnificPopup.open({
    items: {
    src: $('#sidebar-window-wrap'), // может быть HTML строкой, jQuery объектом, или CSS селектором
    },
    type: 'inline',
    removalDelay: 3
    });
  }, 10000);
  $.cookie('visit', true, cookieOptions);
  var cookieLog = $.cookie('visit');
  console.log(cookieLog);
}
}); // end ready
</script>
Параметр «expires» отвечает за срок хранения cookie в днях.
10000 — задержка в 10 секунд перед появлением окна.
4. Под скриптом вызова функции добавить HTML-код окна:
<div id="sidebar-window-wrap" style="display:none; background: #ffffff;padding: 40px; width: 400px; margin-left: auto; margin-right: auto;">

Содержимое окна

</div>

По материалам статьи:
https://zaurmag.ru/javascript-jquery/modalnoe-okno-odin-raz.html

Категория:

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