sipsancho (18 Август 2016 - 12:10) писал:
И снова добрый день!
Возникла необходимость создать "всплывающее окно" либо при попадании клиента на сайт, либо в момент закрытия вкладки. Есть возможность осуществить подобное?
Возникла необходимость создать "всплывающее окно" либо при попадании клиента на сайт, либо в момент закрытия вкладки. Есть возможность осуществить подобное?
Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
</head>
Вставьте перед ним код:
<script src="//yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script> <script type="text/javascript"> $(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не делаем if (!$.cookie('hideModal')) { // если cookie не установлено появится окно // с задержкой 5 секунд var delay_popup = 5000; setTimeout("document.getElementById('overlay').style.display='block'", delay_popup); } // Запоминаем в куках, что посетитель уже заходил $.cookie('hideModal', true, { // Время хранения cookie в днях expires: 1, path: '/' }); }); </script>
Найдите код:
<body>
Вставьте после него код:
<!-- Модальное Окно --> <div id="overlay"> <div class="popup"> <h2>Модальное Окно!</h2> <p> Текст </p> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button> </div> </div>
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, в конце добавьте код:
/* Всплывающее окно при загрузке сайта */ /* базовый контейнер, фон затемнения*/ #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 } }
Данное окно будет появляться для пользователя только один раз при посещении сайта (чтобы не мешать при переключении страниц и повторных заходах).
Значение в коде expires: 1 обозначает, что cookies файлы будут хранится 1 сутки, после чего окно снова начнет появляться.