Всплывающее PopUp окно со временем хранения cookie

dronnn

Проверенные
Сообщения
32
Реакции
6
Баллы
3,305
Уважаемые коллеги, добрый день!
Необходимо реализовать всплывающее PopUp окно со временем хранения cookie в днях.
Нашел данный код, работает исправно, но естественно появляется каждый раз.
Код:
<!--Всплывающее окно часть 1-->
<style>
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
font:28px Arial;
font-weight: bold;
text-align: center;
color: #000000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Arial;
color: #000000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
</style>

<div id="parent_popup">

<div id="popup">
<h1>&laquo;Pop-Up&raquo; при загрузке сайта</h1>

<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения

фона и возможностью управления временем появления.</p>

<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-

либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close" title="Закрыть" onclick="document.getElementById

('parent_popup').style.display='none';">X</a>
</div>
</div>

<!--Всплывающее окно Конец 1 части-->


<!--Всплывающее окно Часть 2-->

<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>
<!--Всплывающее окно Конец 2 части-->
Привязать к нему скрипт с cookie не получилось.
Другие готовые решения скриптов из сети не работают.

Может кто нибудь подскажет, как правильно реализовать. Или возможно есть наработки, плагин...

Заранее благодарен.
 
Исходники 2010 года....
Самое простое решение:
Инклюдим либу для работы с кукис
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

Содержимое аттрибута onclick меняем на
document.getElementById('parent_popup').style.display='none';Cookies.set('hide_popup', '1', { expires: 7 });
Тут мы в куки устанавливаем поле 'hide_popup' со значением 1, которое истечет (уберется из кукис) через 7 дней.

setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
Вот этот код надо обернуть в условие "если в куках отсутствует поле 'hide_popup'", то показываем попап. Надеюсь, справитесь.
 
Последнее редактирование:
Исходники 2010 года....
Самое простое решение:
Инклюдим либу для работы с кукис
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

Содержимое аттрибута onclick меняем на
document.getElementById('parent_popup').style.display='none';Cookies.set('hide_popup', '1', { expires: 7 });
Тут мы в куки устанавливаем поле 'hide_popup' со значением 1, которое истечет (уберется из кукис) через 7 дней.

setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
Вот этот код надо обернуть в условие "если в куках отсутствует поле 'hide_popup'", то показываем попап. Надеюсь, справитесь.

Большое спасибо, получаем из последней строки -

if (!$.cookie('hide_popup')) {
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
}
 
Большое спасибо, получаем из последней строки -

if (!$.cookie('hide_popup')) {
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
}
Если у вас подключена jquery, то так и пишите. Библиотеку можно не подключать и использовать стандартные функции из jQuery и убрать это getElementById и заменить на селекторы...
 
Хорошо, буду пробовать! ?
 
Приветствую всех!

Создал простую HTML страницу с данным кодом, все исправно работает!

Код:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   p {
    font-size: 15px;
   }
    /* Всплывающее окно
* при загрузке сайта           
*/
/* базовый контейнер, фон затемнения*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}
/* модальный блок */
.popup {
    top: 25%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}
/* заголовки в модальном блоке */
.popup h2, .popup h3 {
    margin: 0 0 1rem 0;
    font-weight: 300;
    line-height: 1.3;
    color: #009032;
    text-shadow: 1px 2px 4px #ddd;
}
/* кнопка закрытия */
.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;

}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}
/* изображения в модальном окне */
.popup img {
    width: 100%;
    height: auto;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
} 
  </style>
 </head>
 <body>
<p align="center"><font size="5" color="#FF6600">Lorem ipsum dolor sit amet</font></p>
<p align="center"> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p align="center">Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.</p>
 
<!-- Модальное Окно  -->
        <div id="overlay">
            <div class="popup">
                <h2>Модальное Окно!</h2>
                <p><img src="trackpad-safari-predprosmotr-ssylok_0_o.jpg"></p>
                <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
            </div>
        </div>
        <script src="/js/modal/jquery.min.js"></script>
        <script src="/js/modal/jquery.cookie.js"></script>
        <script type="text/javascript">
        $(function() {
            if (!$.cookie('hideModal')) {
            var delay_popup = 5000;
            setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
            }
            $.cookie('hideModal', true, {
                expires: 7,
                path: '/'
            });
        });
        </script>   
    </body>
</html>

Но в странице ксена 2.0 получаю этот прекрасный сюрприз в виде -
Код:
(index):985 Uncaught TypeError: $.cookie is not a function
    at HTMLDocument.<anonymous> ((index):985)
    at j (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.I (jquery.min.js:3)

Товарищи, в чем проблема? Подскажите...
 
Приветствую всех!

Создал простую HTML страницу с данным кодом, все исправно работает!

Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   p {
    font-size: 15px;
   }
    /* Всплывающее окно
* при загрузке сайта          
*/
/* базовый контейнер, фон затемнения*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}
/* модальный блок */
.popup {
    top: 25%;
    left: 0;
    right: 0;      
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}
/* заголовки в модальном блоке */
.popup h2, .popup h3 {
    margin: 0 0 1rem 0;
    font-weight: 300;
    line-height: 1.3;
    color: #009032;
    text-shadow: 1px 2px 4px #ddd;
}
/* кнопка закрытия */
.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;

}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}
/* изображения в модальном окне */
.popup img {
    width: 100%;
    height: auto;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1 }
}
  </style>
</head>
<body>
<p align="center"><font size="5" color="#FF6600">Lorem ipsum dolor sit amet</font></p>
<p align="center"> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p align="center">Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.</p>

<!-- Модальное Окно  -->
        <div id="overlay">
            <div class="popup">
                <h2>Модальное Окно!</h2>
                <p><img src="trackpad-safari-predprosmotr-ssylok_0_o.jpg"></p>
                <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
            </div>
        </div>
        <script src="/js/modal/jquery.min.js"></script>
        <script src="/js/modal/jquery.cookie.js"></script>
        <script type="text/javascript">
        $(function() {
            if (!$.cookie('hideModal')) {
            var delay_popup = 5000;
            setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
            }
            $.cookie('hideModal', true, {
                expires: 7,
                path: '/'
            });
        });
        </script>  
    </body>
</html>

Но в странице ксена 2.0 получаю этот прекрасный сюрприз в виде -
Код:
(index):985 Uncaught TypeError: $.cookie is not a function
    at HTMLDocument.<anonymous> ((index):985)
    at j (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.I (jquery.min.js:3)

Товарищи, в чем проблема? Подскажите...
Ты попап окно куда вставляешь? В какой шаблон? надо вставлять в перед </body> (в 1 ветке это шаблон page_container_js_body)
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу