Перейти к содержимому


Сделал Всплывающее Окно - Делюсь С Вами


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 142

#121 Rosalina

Rosalina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 233 сообщений

Отправлено 10 Февраль 2015 - 03:02

Спасибо.

#122 TVS163

TVS163

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 92 сообщений

Отправлено 20 Март 2015 - 22:23

Просмотр сообщенияmiyako (11 Март 2013 - 08:19) писал:

Чтобы окно всплывало только один раз нужно в js добавить такой код:
<script language="javascript">
<!--
if (document.cookie.indexOf('_visited=1') == -1) {
/*код с всплывающим окном*/
document.cookie = '_visited=1; path=/';
}
//-->
</script>

А как мне сделать чтобы оно открывалось не только один раз, но и только на главной странице

#123 TVS163

TVS163

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 92 сообщений

Отправлено 20 Март 2015 - 23:06

Вот мой код для модального окна. Почему у меня в конце страницы всплывает оно в любом случае, первый раз я на сайте или нет? Как сделать чтобы оно работало нормально, появлялось только тогда когда посетитель первый раз зашел на сайт и на нужном месте? Номер аккаунта SL-336529


Цитата

/* Всплывающее окно */
<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>

Прикрепленные изображения

  • Безымянный.jpg


#124 Наталья11111

Наталья11111

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 397 сообщений

Отправлено 25 Март 2015 - 15:22

День добрый!

Сделала всплывающее окно, возникли мелкие недоработки, помогите пожалуйста исправить.
1. Переместить всплывающее окно в правый нижний угол сайта.
2. Убрать рамочку на всплывающем окне, оставить только изображение
3. Можно ли сделать так, что бы при клике на всплывающее окно выскакивало еще одно окно, в котором клиент мог бы заказать обратный звонок?
4. Убрать темный фон, который появляется с всплывающим окном.

Заранее благодарю

#125 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Апрель 2015 - 03:24

Просмотр сообщенияTVS163 (20 Март 2015 - 23:06) писал:

Вот мой код для модального окна. Почему у меня в конце страницы всплывает оно в любом случае, первый раз я на сайте или нет? Как сделать чтобы оно работало нормально, появлялось только тогда когда посетитель первый раз зашел на сайт и на нужном месте? Номер аккаунта SL-336529

Чтобы всплывающее окно отображалось только на главной странице, весь его код оберните в условие вида:
{% IF index_page %}
код всплывающего окна
{% ENDIF %}

Также весь код всплывающего окна с условием перенесите вверх шаблона, поставив после:
<body class="home">


Просмотр сообщенияНаталья11111 (25 Март 2015 - 15:22) писал:

День добрый!

Сделала всплывающее окно, возникли мелкие недоработки, помогите пожалуйста исправить.
1. Переместить всплывающее окно в правый нижний угол сайта.
2. Убрать рамочку на всплывающем окне, оставить только изображение
3. Можно ли сделать так, что бы при клике на всплывающее окно выскакивало еще одно окно, в котором клиент мог бы заказать обратный звонок?
4. Убрать темный фон, который появляется с всплывающим окном.

Заранее благодарю

Уточните пожалуйста, на каком аккаунте можно пронаблюдать за результатом?

#126 Наталья11111

Наталья11111

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 397 сообщений

Отправлено 03 Апрель 2015 - 09:01

Просмотр сообщенияVaccina (03 Апрель 2015 - 03:24) писал:

Чтобы всплывающее окно отображалось только на главной странице, весь его код оберните в условие вида:
{% IF index_page %}
код всплывающего окна
{% ENDIF %}

Также весь код всплывающего окна с условием перенесите вверх шаблона, поставив после:
<body class="home">




Уточните пожалуйста, на каком аккаунте можно пронаблюдать за результатом?

Вопрос уже не актуален))

#127 Gerti

Gerti

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 195 сообщений

Отправлено 17 Апрель 2015 - 16:40

Просмотр сообщенияRosalina (07 Февраль 2015 - 15:38) писал:

Ну короче, ничего не получается. Я 55 раз все переделала, все перепробовала. Чтобы посетителей не пугать, решила пробовать на другом. Ситуация такая же. Ну помогите, вообще нужная вещь и никак запустить нормально не могу. Насколько я понимаю, не только у меня такие проблемы. Сейчас пробую тут   http://x72368.storeland.ru/

Аналогичная проблема, не могу настроить все попробовала по инструкции, все равно выскакивает на каждой странице. А нужно только на главной и один раз!

#128 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Gerti

Gerti

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 195 сообщений

Отправлено 18 Апрель 2015 - 10:25

Просмотр сообщенияVaccina (18 Апрель 2015 - 02:01) писал:

Для отображения один раз в шаблон 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>

теперь оно вообще пропало, не отображается.
Посмотрите пожалуйста что не так, уж очень хочется настроить. SL -340804

#130 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 18 Апрель 2015 - 11:11

Просмотр сообщенияGerti (18 Апрель 2015 - 10:25) писал:

теперь оно вообще пропало, не отображается.
Посмотрите пожалуйста что не так, уж очень хочется настроить. SL -340804
Здравствуйте.
Всплывающее окно работает правильно, в соответствии с указанной выше инструкцией (скриншот в приложении).
Этот скрипт указывает условие открытие этого окна только один раз для конкретного посетителя. После того, как посетитель увидел его (перешел по ссылке или закрыл), окно отображаться больше не будет.

Так же рекомендую убрать лишние строки в подвале, для этого в шаблоне HTML найдите и удалите код:
<h2>Всплывающее модальное окно при загрузке сайта на CSS</h2>
<p style="text-align: center;">
<h3>Модальное окно откроется после полной загрузки страницы по истечении 5 секунд.</h3></p>

Прикрепленные изображения

  • Screenshot_1.png


#131 portos

portos

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 04 Сентябрь 2015 - 02:18

спасибо , получилось круто . только всплывает каждый раз при заходе на главную (ничего не помогло из ваших примеров) пока не найду другой вариант оставлю этот.

#132 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 05 Сентябрь 2015 - 03:51

Укажите пожалуйста номер аккаунта, чтобы мы могли просмотреть ваш результат и проконсультировать по поводу одноразового появления окна.

#133 portos

portos

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 06 Сентябрь 2015 - 21:46

Просмотр сообщенияVaccina (05 Сентябрь 2015 - 03:51) писал:

Укажите пожалуйста номер аккаунта, чтобы мы могли просмотреть ваш результат и проконсультировать по поводу одноразового появления окна.
взял код с другого сайта (такой как у вас) и он работает как положено ,так и не понял в чём была причина

#134 chebsalyt

chebsalyt

    Пользователь

  • Пользователи
  • PipPip
  • 41 сообщений

Отправлено 23 Март 2016 - 17:17

Как сделать чтобы у посетителя окно выходило раз в ё день?

т.е. зашёл он один раз, увидел окно, закрыл его или перешёл по ссылке и в течении дня окно у него больше не выходит. Окно у него выйдет если он зайдёт на следующий день.

Заранее благодарен!

#135 chebsalyt

chebsalyt

    Пользователь

  • Пользователи
  • PipPip
  • 41 сообщений

Отправлено 24 Март 2016 - 11:33

Очень жду ответа на свой вопрос! Это реализуемо?

#136 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 24 Март 2016 - 16:25

Просмотр сообщенияchebsalyt (23 Март 2016 - 17:17) писал:

Как сделать чтобы у посетителя окно выходило раз в ё день?

т.е. зашёл он один раз, увидел окно, закрыл его или перешёл по ссылке и в течении дня окно у него больше не выходит. Окно у него выйдет если он зайдёт на следующий день.

Заранее благодарен!

Здравствуйте, можно сделать, что один раз всплывало окошко, инструкция здесь: http://forum.storela...ами/#entry50607

сделать так, чтобы каждый день ровно 1 раз всплывало окно не получится.

#137 chebsalyt

chebsalyt

    Пользователь

  • Пользователи
  • PipPip
  • 41 сообщений

Отправлено 24 Март 2016 - 22:15

Просмотр сообщенияЮля123 (24 Март 2016 - 16:25) писал:

Здравствуйте, можно сделать, что один раз всплывало окошко, инструкция здесь: http://forum.storela...ами/#entry50607

сделать так, чтобы каждый день ровно 1 раз всплывало окно не получится.

Но в одном из постов выше было решение для того чтобы оно выходило раз в 1 месяц..
Чем отличается 1 день?

#138 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Denis22

Denis22

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 78 сообщений

Отправлено 22 Июнь 2017 - 12:46

Скрытый текст
Получилось сделать всплывающее окно по данной инструкции, но нужны изменить.
1) Как сделать чтоб окно выскакивало без затемнения в левом вернем углу? Тоесть если не закрыть его, то всеравно можно лазить по сайту и оно будет висеть
2) В всплывающем окне нужно разместить три картинки-ссылки с текстом под ними
3) Появляется один раз за сеанс
Пример прикрепил popup.png
Спасибо!  Все коды для всплывающего окна с сайта удалил
Аккаунт SL-26701

#140 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 26 Июнь 2017 - 09:53

Просмотр сообщенияDenis22 (22 Июнь 2017 - 12:46) писал:

Скрытый текст
Получилось сделать всплывающее окно по данной инструкции, но нужны изменить.
1) Как сделать чтоб окно выскакивало без затемнения в левом вернем углу? Тоесть если не закрыть его, то всеравно можно лазить по сайту и оно будет висеть
2) В всплывающем окне нужно разместить три картинки-ссылки с текстом под ними
3) Появляется один раз за сеанс
Пример прикрепил popup.png
Спасибо!  Все коды для всплывающего окна с сайта удалил
Аккаунт 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;}

Прикрепленные изображения

  • 26-06-2017 9-54-08.jpg





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных