Используем скрипт 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 адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.