Используем скрипт Colorbox для вывода различных сообщений (vamshop)
В вамшопе в последних сборках используется для вывода увеличеных картинок и попап-окон “Задать вопрос о товаре”, “Версия ля печати” плагин для jQuery Colorbox. В первом случае плагин настроен для вывода галереи изображений, во втором – внешней страницы. Научим плагин выводить html-блок непосредственно из тела страницы.
1. Проверяем, чтоб на странице, на которой мы будем делать попапы, был подключен скрипт. В шапке или непосредственно в теле должно быть вот так:
<script src="jscript/jquery/plugins/colorbox/jquery.colorbox-min.js" type="text/javascript"></script> |
Если нет, то добаляем.
2. Оформляем ссылку, по клику на которой будет всплывать окно:
<a class="inline" href="#inline_content">Вывести сообщение</a> |
3. Вставляем выше вызов скрипта:
{literal}<script>// <![CDATA[ $(document).ready(function(){ $(".inline").colorbox({inline:true}); }); // ]]></script>{/literal} |
4. Добавляем вниз страницы блок, который будем выводить:
5. В итоге по клику получим всплывающее сообщение, текст в который будет выводиться непосредственно с текущей страницы.
Немає коментарів.