Сделал Всплывающее Окно - Делюсь С Вами
#121
Отправлено 10 Февраль 2015 - 03:02
#122
Отправлено 20 Март 2015 - 22:23
miyako (11 Март 2013 - 08:19) писал:
<script language="javascript"> <!-- if (document.cookie.indexOf('_visited=1') == -1) { /*код с всплывающим окном*/ document.cookie = '_visited=1; path=/'; } //--> </script>
А как мне сделать чтобы оно открывалось не только один раз, но и только на главной странице
#123
Отправлено 20 Март 2015 - 23:06
Цитата
<script language="javascript">
<!--
if (document.cookie.indexOf('_visited=1') == -1) {
/*код с всплывающим окном*/
document.cookie = '_visited=1; path=/';
}
//-->
</script>
#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 Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #00000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #00000;
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>
</head>
<body>
<h3>Модальное окно откроется после полной загрузки страницы по истечении 5 секунд.</h3></p>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
<div id="parent_popup">
<div id="popup">
<h2>Уважаемый посетитель!</h2>
Вы находитесь на нашем сайте впервые. Дабы упростить поиск товара и устранить все сомнения предлагаем свою помощь. В случае необоходимости вы можете воспользоваться формой обратной связи или позвонить по телефону <strong>8-848-220-81-51</strong>
<p><h2>Легкого поиска и приятных покупок!</h2></p>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div>
<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>
#124
Отправлено 25 Март 2015 - 15:22
Сделала всплывающее окно, возникли мелкие недоработки, помогите пожалуйста исправить.
1. Переместить всплывающее окно в правый нижний угол сайта.
2. Убрать рамочку на всплывающем окне, оставить только изображение
3. Можно ли сделать так, что бы при клике на всплывающее окно выскакивало еще одно окно, в котором клиент мог бы заказать обратный звонок?
4. Убрать темный фон, который появляется с всплывающим окном.
Заранее благодарю
#125
Отправлено 03 Апрель 2015 - 03:24
TVS163 (20 Март 2015 - 23:06) писал:
Чтобы всплывающее окно отображалось только на главной странице, весь его код оберните в условие вида:
{% IF index_page %} код всплывающего окна {% ENDIF %}
Также весь код всплывающего окна с условием перенесите вверх шаблона, поставив после:
<body class="home">
Наталья11111 (25 Март 2015 - 15:22) писал:
Сделала всплывающее окно, возникли мелкие недоработки, помогите пожалуйста исправить.
1. Переместить всплывающее окно в правый нижний угол сайта.
2. Убрать рамочку на всплывающем окне, оставить только изображение
3. Можно ли сделать так, что бы при клике на всплывающее окно выскакивало еще одно окно, в котором клиент мог бы заказать обратный звонок?
4. Убрать темный фон, который появляется с всплывающим окном.
Заранее благодарю
Уточните пожалуйста, на каком аккаунте можно пронаблюдать за результатом?
#126
Отправлено 03 Апрель 2015 - 09:01
Vaccina (03 Апрель 2015 - 03:24) писал:
{% IF index_page %} код всплывающего окна {% ENDIF %}
Также весь код всплывающего окна с условием перенесите вверх шаблона, поставив после:
<body class="home">
Уточните пожалуйста, на каком аккаунте можно пронаблюдать за результатом?
Вопрос уже не актуален))
#127
Отправлено 17 Апрель 2015 - 16:40
Rosalina (07 Февраль 2015 - 15:38) писал:
Аналогичная проблема, не могу настроить все попробовала по инструкции, все равно выскакивает на каждой странице. А нужно только на главной и один раз!
#128
Отправлено 18 Апрель 2015 - 02:01
Цитата
{% IF index_page %} код всплывающего окна {% ENDIF %}
Для отображения один раз в шаблон HTML вставьте:
<script language="javascript"> if (document.cookie.indexOf('_visited=1') == -1) { var delay_popup = 5000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); document.cookie = '_visited=1; path=/'; } </script>
#129
Отправлено 18 Апрель 2015 - 10:25
Vaccina (18 Апрель 2015 - 02:01) писал:
<script language="javascript"> if (document.cookie.indexOf('_visited=1') == -1) { var delay_popup = 5000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); document.cookie = '_visited=1; path=/'; } </script>
теперь оно вообще пропало, не отображается.
Посмотрите пожалуйста что не так, уж очень хочется настроить. SL -340804
#130
Отправлено 18 Апрель 2015 - 11:11
Gerti (18 Апрель 2015 - 10:25) писал:
Посмотрите пожалуйста что не так, уж очень хочется настроить. SL -340804
Всплывающее окно работает правильно, в соответствии с указанной выше инструкцией (скриншот в приложении).
Этот скрипт указывает условие открытие этого окна только один раз для конкретного посетителя. После того, как посетитель увидел его (перешел по ссылке или закрыл), окно отображаться больше не будет.
Так же рекомендую убрать лишние строки в подвале, для этого в шаблоне HTML найдите и удалите код:
<h2>Всплывающее модальное окно при загрузке сайта на CSS</h2> <p style="text-align: center;"> <h3>Модальное окно откроется после полной загрузки страницы по истечении 5 секунд.</h3></p>
#131
Отправлено 04 Сентябрь 2015 - 02:18
#132
Отправлено 05 Сентябрь 2015 - 03:51
#133
Отправлено 06 Сентябрь 2015 - 21:46
Vaccina (05 Сентябрь 2015 - 03:51) писал:
#134
Отправлено 23 Март 2016 - 17:17
т.е. зашёл он один раз, увидел окно, закрыл его или перешёл по ссылке и в течении дня окно у него больше не выходит. Окно у него выйдет если он зайдёт на следующий день.
Заранее благодарен!
#135
Отправлено 24 Март 2016 - 11:33
#136
Отправлено 24 Март 2016 - 16:25
chebsalyt (23 Март 2016 - 17:17) писал:
т.е. зашёл он один раз, увидел окно, закрыл его или перешёл по ссылке и в течении дня окно у него больше не выходит. Окно у него выйдет если он зайдёт на следующий день.
Заранее благодарен!
Здравствуйте, можно сделать, что один раз всплывало окошко, инструкция здесь: http://forum.storela...ами/#entry50607
сделать так, чтобы каждый день ровно 1 раз всплывало окно не получится.
#137
Отправлено 24 Март 2016 - 22:15
Юля123 (24 Март 2016 - 16:25) писал:
сделать так, чтобы каждый день ровно 1 раз всплывало окно не получится.
Но в одном из постов выше было решение для того чтобы оно выходило раз в 1 месяц..
Чем отличается 1 день?
#138
Отправлено 25 Март 2016 - 05:42
http://forum.storela...__40#entry88783
Мы установим свой, только для этого удалите старый код всплывающего окна =)
В конец main.js пропишите:
jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
В конец main.css:
.mainup { display:none; position: fixed; z-index:10000; top: 40%; width: 390px; padding-left: 20px; padding-right: 0px; height:137px; left:50%!important; margin-left: -200px!important; background: #fff; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; box-shadow: 0px 5px 18px #000; -webkit-box-shadow:0px 5px 18px #000; -khtml-box-shadow:0px 5px 18px #000; -moz-box-shadow:0px 5px 18px #000; font-weight: bold; border: none; font-family: arial; font-size: 12px; font-style: oblique; line-height: 9px; } .doptext{ COLOR: #FFF; font-variant: normal; line-height:125%; font-size: 14px; text-shadow: #000 1px 1px 0; margin-bottom: 8px; margin-top: 7px; padding-top: 6px; overflow-y: auto!important; width: 400px; height: 100px!important; scrollbar-face-color: #5f1b1b; scrollbar-highlight-color: #212126; scrollbar-shadow-color: #ae5151; scrollbar-3dlight-color: #212126; scrollbar-arrow-color: #5f1b1b; scrollbar-track-color: #761a1a; scrollbar-darkshadow-color: #ae5151; }
В шаблон HTML перед </body> вставьте:
<script type="text/javascript"> $(document).ready(function(){ $("#setCookie").click(function () { $.cookie("popup", "24house", {expires: 1} ); $("#popupBlock").hide(); }); if ( $.cookie("popup") == null ) { $("#popupBlock").show(); } else { $("#popupBlock").hide(); } }); </script> <div id="popupBlock" class="mainup"> <div id="setCookie" style="position: absolute;cursor:pointer;right:0;">x</div> <div class="doptext"> <h1 style="text-align: center;"><a href="http://vsscan.ru/goods/CAN-adapter-VSSCAN-LIGHT" style="font-size: 13px; line-height: 1.4em;"><img alt="Заказать VSSCAN LIGHT" src="http://design.vsscan.ru/L.png" style="border: 0px; margin-top: 10px; width: 680px; height: 508px;" /></a></h1> </div> </div>
После изменения при открытии сайта всплывет окно с вашим текстом, при клике на закрытие(крестик) данного окна, оно всплывет только на следующий день.
#139
Отправлено 22 Июнь 2017 - 12:46
1) Как сделать чтоб окно выскакивало без затемнения в левом вернем углу? Тоесть если не закрыть его, то всеравно можно лазить по сайту и оно будет висеть
2) В всплывающем окне нужно разместить три картинки-ссылки с текстом под ними
3) Появляется один раз за сеанс
Пример прикрепил
Спасибо! Все коды для всплывающего окна с сайта удалил
Аккаунт SL-26701
#140
Отправлено 26 Июнь 2017 - 09:53
Denis22 (22 Июнь 2017 - 12:46) писал:
1) Как сделать чтоб окно выскакивало без затемнения в левом вернем углу? Тоесть если не закрыть его, то всеравно можно лазить по сайту и оно будет висеть
2) В всплывающем окне нужно разместить три картинки-ссылки с текстом под ними
3) Появляется один раз за сеанс
Пример прикрепил
Спасибо! Все коды для всплывающего окна с сайта удалил
Аккаунт SL-26701
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
</head>
Вставьте перед ним код:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script> <script type="text/javascript"> $(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не делаем if (!$.cookie('hideModal')) { // если cookie не установлено появится окно // с задержкой 3 секунд var delay_popup = 3000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); } // Запоминаем в куках, что посетитель уже заходил $.cookie('hideModal', true, { // Время хранения cookie в днях expires: 1, path: '/' }); }); </script>
Найдите код:
<body>
Вставьте после него код:
<div id="parent_popup"> <div id="popup"> <h1>Внимание!</h1> <div> <div class="item"> <div> <a href="#"> <img src="http://via.placeholder.com/250x150"> </a> <h3>Текст 1</h3> </div> </div> <div class="item"> <div> <a href="#"> <img src="http://via.placeholder.com/250x150"> </a> <h3>Текст 2</h3> </div> </div> <div class="item"> <div> <a href="#"> <img src="http://via.placeholder.com/250x150"> </a> <h3>Текст 3</h3> </div> </div> </div> <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div> </div>
Вместо # укажите Вашу ссылку
src="http://via.placeholder.com/250x150"замените на
src=" ссылка на Ваше изображение "
В файле main.css в самом конце добавьте
/*Всплывающее окно*/ #parent_popup { display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } #popup { background: #fff; max-width: 820px;/*Ширина окна*/ width: 100%; 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 Monotype Corsiva, Arial; font-weight: bold; text-align: center; color: red; text-shadow: 0 1px 3px rgba(0,0,0,.3); } #popup h2{ font:24px Monotype Corsiva, Arial; color: #1985b4; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.3); } #popup h3{ font:18px Monotype Corsiva, Arial; color: #1985b4; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.3); } /* кнопка закрытия */ .close { background-color: rgba(0, 0, 0, 0.8) !important; border: 2px solid #ccc; height: 24px; line-height: 24px !important; position: absolute !important; right: -24px; cursor: pointer !important; font-family: Times !important; font-weight: bold !important; text-align: center !important; text-decoration: none !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 14px !important; text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important; 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) !important; } #popup .item {display:inline-block;}
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных