2
Создание Подсказок
Автор vadim_3383, 31 авг. 2011 21:19
Сообщений в теме: 28
#21
Отправлено 18 Март 2014 - 14:06
Пожалуйста, ответьте на мои вопросы.
#22
Отправлено 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
Отправлено 18 Март 2014 - 17:38
Castiel (18 Март 2014 - 15:01) писал:
Здравствуйте, можно использовать такой вариант.
Добавляем в шаблон HTML перед <!-- конец для всплывающих окон *******************************************-->
Далее вставляем в любое удобное место
Добавляем стили в main.css
Чтобы добавить еще таких же скриптов, необходимо все скопировать и заменить #toggle-link1 #message1 на свои значения
Добавляем в шаблон 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
Отправлено 18 Март 2014 - 18:19
dimabart (18 Март 2014 - 17:38) писал:
Спасибо, попробую!
И еще, можно вопрос по другой теме, на мой взгляд он простой
как прописать условие на странице товара: "если стоимость товара больше 500 руб. то пишем "доставка бесплатная", а если меньше то другой текст??" Куда прописать я найду, я синтаксис не знаю.
И еще, можно вопрос по другой теме, на мой взгляд он простой
как прописать условие на странице товара: "если стоимость товара больше 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
Отправлено 08 Май 2015 - 17:58
dimabart (18 Март 2014 - 17:38) писал:
Спасибо, попробую!
ссылки с подсказками называются "Сколько стоит доставка?" и "Если размер не подойдет?"
#26
Отправлено 11 Май 2015 - 14:11
Здесь есть кто-нибудь?
#27
Отправлено 11 Май 2015 - 14:27
dimabart (08 Май 2015 - 17:58) писал:
Доброго дня. Я сделал две ссылки с подсказками по методу как указано выше. Все работает. НО, если я кликаю по второй ссылке она открывается и я сразу кликаю по первой ссылке то все зависает и подсказка не исчезает пока не обновишь страницу. Подскажите пожалуйста как поправить. Ссылка на страницу: http://artishka.ru/g...ка-3?from=ZDkz#
ссылки с подсказками называются "Сколько стоит доставка?" и "Если размер не подойдет?"
ссылки с подсказками называются "Сколько стоит доставка?" и "Если размер не подойдет?"
#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
Отправлено 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
Отправлено 28 Май 2015 - 01:00
Попробуйте использовать следующий javascript код в замен предыдущему
т.е вам необходимо заменить имеющийся код
на код
или же вы можете удалить имеющийся код и добавить код в 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(); } } }); });
т.е вам необходимо заменить имеющийся код
<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 анонимных