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


Создание Подсказок


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

#21 dimabart

dimabart

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

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

Отправлено 18 Март 2014 - 14:06

Пожалуйста, ответьте на мои вопросы.

#22 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 18 Март 2014 - 15:01

Просмотр сообщенияdimabart (18 Март 2014 - 14:06) писал:

Пожалуйста, ответьте на мои вопросы.

Здравствуйте, можно использовать такой вариант.

Добавляем в шаблон HTML перед <!-- конец для всплывающих окон *******************************************-->
<script>
$(document).ready(function(){
$('#toggle-link1').click(function(e) {
var $message = $('#message1');
if ($message.css('display') != 'block') {
		 $message.show();
		 var firstClick = true;
		 $(document).bind('click.myEvent', function(e) {
				 if (!firstClick && $(e.target).closest('#message1').length == 0) {
						 $message.hide();
						 $(document).unbind('click.myEvent');
				 }
				 firstClick = false;
		 });
}
e.preventDefault();
});
});
</script>

Далее вставляем в любое удобное место
<br><a href="#" id="toggle-link1">А дойдет?</a>
<div id="message1">
<p>мы привезем вам несколько размеров для примерки. Вы спокойно все примерите и выберете то, что подойдет.
Все Ваши пожелания по доставке дополнительных размеров и моделей одежды для примерки Вы можете сообщить в комментариях при оформлении заказа или по телефону, когда мы Вам позвоним для подтверждения заказа. </p>
</div>

Добавляем стили в main.css
#message1 {
  display:none;
  border: 1px solid #E9E9E9;
  border-radius: 5px;
  box-shadow: -5px 5px 10px #7C7C7C;
min-width: 200px;
max-width: 450px;
padding: 5px;
position: absolute;
background: #FBFFCA;
}
#toggle-link1 {
  color:#0099CC;
  text-decoration: underline;
}

Чтобы добавить еще таких же скриптов, необходимо все скопировать и заменить #toggle-link1  #message1  на свои значения

#23 dimabart

dimabart

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

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

Отправлено 18 Март 2014 - 17:38

Просмотр сообщенияCastiel (18 Март 2014 - 15:01) писал:

Здравствуйте, можно использовать такой вариант.

Добавляем в шаблон HTML перед <!-- конец для всплывающих окон *******************************************-->
<script>
$(document).ready(function(){
$('#toggle-link1').click(function(e) {
var $message = $('#message1');
if ($message.css('display') != 'block') {
		 $message.show();
		 var firstClick = true;
		 $(document).bind('click.myEvent', function(e) {
				 if (!firstClick && $(e.target).closest('#message1').length == 0) {
						 $message.hide();
						 $(document).unbind('click.myEvent');
				 }
				 firstClick = false;
		 });
}
e.preventDefault();
});
});
</script>

Далее вставляем в любое удобное место
<br><a href="#" id="toggle-link1">А дойдет?</a>
<div id="message1">
<p>мы привезем вам несколько размеров для примерки. Вы спокойно все примерите и выберете то, что подойдет.
Все Ваши пожелания по доставке дополнительных размеров и моделей одежды для примерки Вы можете сообщить в комментариях при оформлении заказа или по телефону, когда мы Вам позвоним для подтверждения заказа. </p>
</div>

Добавляем стили в main.css
#message1 {
display:none;
border: 1px solid #E9E9E9;
border-radius: 5px;
box-shadow: -5px 5px 10px #7C7C7C;
min-width: 200px;
max-width: 450px;
padding: 5px;
position: absolute;
background: #FBFFCA;
}
#toggle-link1 {
color:#0099CC;
text-decoration: underline;
}

Чтобы добавить еще таких же скриптов, необходимо все скопировать и заменить #toggle-link1  #message1  на свои значения

Спасибо, попробую!

И еще, можно вопрос по другой теме, на мой взгляд он простой   :)    

как прописать условие на странице товара:  "если стоимость товара больше 500 руб.  то пишем "доставка бесплатная", а если меньше то другой текст??" Куда прописать я найду, я синтаксис не знаю.

#24 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 18 Март 2014 - 18:19

Просмотр сообщенияdimabart (18 Март 2014 - 17:38) писал:

Спасибо, попробую!

И еще, можно вопрос по другой теме, на мой взгляд он простой   :)

как прописать условие на странице товара:  "если стоимость товара больше 500 руб.  то пишем "доставка бесплатная", а если меньше то другой текст??" Куда прописать я найду, я синтаксис не знаю.
В шаблоне Товар после строчки
<h4>Условия доставки:</h4>
можете вставить
<div style="{% IF GOODS_MOD_PRICE_NOW < 500 %}display:none;{% ENDIF %}margin-top:10px; color:#F00; font-size:16px;">
					  Доставка бесплатная
					</div>

блок будет скрываться, если стоимость меньше 500р

#25 dimabart

dimabart

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

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

Отправлено 08 Май 2015 - 17:58

Просмотр сообщенияdimabart (18 Март 2014 - 17:38) писал:

Спасибо, попробую!

Доброго дня. Я сделал две ссылки с подсказками по методу как указано выше. Все работает. НО, если я кликаю по второй ссылке она открывается и я сразу кликаю по первой ссылке то все зависает и подсказка не исчезает пока не обновишь страницу. Подскажите пожалуйста как поправить. Ссылка на страницу: http://artishka.ru/g...ка-3?from=ZDkz#
ссылки с подсказками называются "Сколько стоит доставка?"  и  "Если размер не подойдет?"

#26 dimabart

dimabart

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

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

Отправлено 11 Май 2015 - 14:11

Здесь есть кто-нибудь?

#27 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 11 Май 2015 - 14:27

Просмотр сообщенияdimabart (08 Май 2015 - 17:58) писал:

Доброго дня. Я сделал две ссылки с подсказками по методу как указано выше. Все работает. НО, если я кликаю по второй ссылке она открывается и я сразу кликаю по первой ссылке то все зависает и подсказка не исчезает пока не обновишь страницу. Подскажите пожалуйста как поправить. Ссылка на страницу: http://artishka.ru/g...ка-3?from=ZDkz#
ссылки с подсказками называются "Сколько стоит доставка?"  и  "Если размер не подойдет?"
Здравствуйте, найдите в main.css
#message1 {
  display: none;
  border: 1px solid #E9E9E9;
  border-radius: 5px;
  box-shadow: -5px 5px 10px #7C7C7C;
  min-width: 200px;
  max-width: 450px;
  padding: 5px;
  position: relative;
  bottom: 105px;
  background: #FBFFCA;
}
замените на

#message1 {
  display: none;
  border: 1px solid #E9E9E9;
  border-radius: 5px;
  box-shadow: -5px 5px 10px #7C7C7C;
  min-width: 200px;
  max-width: 450px;
  padding: 5px;
	position: absolute;
  background: #FBFFCA;
}


#28 dimabart

dimabart

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

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

Отправлено 11 Май 2015 - 20:05

Просмотр сообщенияИрина345 (11 Май 2015 - 14:27) писал:

Здравствуйте, найдите в main.css
#message1 {
display: none;
border: 1px solid #E9E9E9;
border-radius: 5px;
box-shadow: -5px 5px 10px #7C7C7C;
min-width: 200px;
max-width: 450px;
padding: 5px;
position: relative;
bottom: 105px;
background: #FBFFCA;
}
замените на

#message1 {
display: none;
border: 1px solid #E9E9E9;
border-radius: 5px;
box-shadow: -5px 5px 10px #7C7C7C;
min-width: 200px;
max-width: 450px;
padding: 5px;
position: absolute;
background: #FBFFCA;
}
Да нет, тут дело не в этом, это я сам изменил чтобы скрыть ссылку, иначе если ее оставить открытую, то при нажатии на нее все повиснет. Тут надо разбираться с кодом скрипта. Может кто подскажет как сделать чтоб не висло? А то что вы сказали я сделаю чтоб было видно обе ссылки, если надо конечно.

#29 Vaccina

Vaccina

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

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

Отправлено 28 Май 2015 - 01:00

Попробуйте использовать следующий javascript код в замен предыдущему

$(function() {
  $('#toggle-link1').click(function() {
	$('#message1').toggle();
	return (false);
  });
  $('#toggle-link').click(function() {
	$('#message').toggle();
	return (false);
  });
  $('body').click(function(e) {
	if ($('#toggle-link:visible').length || $('#toggle-link1:visible').length) {
	  if (!$(e.target).closest('#message1').length && !$(e.target).closest('#message').length) {
		$('#message, #message1').hide();
	  }
	}
  });
});

т.е вам необходимо заменить имеющийся код

<script>
$(document).ready(function(){
$('#toggle-link').click(function(e) {
var $message = $('#message');
if ($message.css('display') != 'block') {
		 $message.show();
		 var firstClick = true;
		 $(document).bind('click.myEvent', function(e)
		
		 {
				 if (!firstClick && $(e.target).closest('#message').length == 0) {
						 $message.hide();
						 $(document).unbind('click.myEvent');
				 }
				 firstClick = false;
		 });
}
e.preventDefault();
});
});
</script>
<script>
$(document).ready(function(){
$('#toggle-link1').click(function(e) {
var $message = $('#message1');
if ($message.css('display') != 'block') {
				 $message.show();
				 var firstClick = true;
				 $(document).bind('click.myEvent', function(e) {
								 if (!firstClick && $(e.target).closest('#message1').length == 0)
								
								 {
												 $message.hide();
												 $(document).unbind('click.myEvent');
								 }
								 firstClick = false;
				 });
}
e.preventDefault();
});
});
</script>

на код

<script>
$(function() {
  $('#toggle-link1').click(function() {
	$('#message1').toggle();
	return (false);
  });
  $('#toggle-link').click(function() {
	$('#message').toggle();
	return (false);
  });
  $('body').click(function(e) {
	if ($('#toggle-link:visible').length || $('#toggle-link1:visible').length) {
	  if (!$(e.target).closest('#message1').length && !$(e.target).closest('#message').length) {
		$('#message, #message1').hide();
	  }
	}
  });
});
</script>

или же вы можете удалить имеющийся код и добавить код в main.js

$(function() {
  $('#toggle-link1').click(function() {
	$('#message1').toggle();
	return (false);
  });
  $('#toggle-link').click(function() {
	$('#message').toggle();
	return (false);
  });
  $('body').click(function(e) {
	if ($('#toggle-link:visible').length || $('#toggle-link1:visible').length) {
	  if (!$(e.target).closest('#message1').length && !$(e.target).closest('#message').length) {
		$('#message, #message1').hide();
	  }
	}
  });
});





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

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