Используем скрипт Colorbox для вывода различных сообщений (vamshop)

07.08.2015 | Написал

В вамшопе в последних сборках используется для вывода увеличеных картинок и попап-окон «Задать вопрос о товаре», «Версия ля печати» плагин для 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. В итоге по клику получим всплывающее сообщение, текст в который будет выводиться непосредственно с текущей страницы.

Метки: ,
Комментарии читателей статьи "Используем скрипт Colorbox для вывода различных сообщений (vamshop)"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.