Используем скрипт 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)"

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

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.