Задать вопрос Связаться с нами
  • Главная
  • Услуги
    • Исправление ошибок
    • Доработка сайтов
    • Обслуживание сайтов
    • Техподдержка сайтов
    • Веб-разработка
    • Интернет-магазины
  • Модули
    • Антирутин
    • SMS-уведомления
    • Импорт данных
    • Простые отзывы
    • Древовидный прайс-лист
    • Всплывающие окна
    • Редиректы для SEO
    • Восстановление данных
    • Бегущая строка
    • Утилиты от «Webdebug»
    • SMS-сообщения (Lite)

    • Все наши модули

    • Все модули Битрикс:Marketplace
  • Акции
  • Поддержка
  • Блог
  • О компании
    • Отзывы
    • Новости
    • Реквизиты

    • Контакты
  • Главная
  • Услуги
    • Исправление ошибок
    • Доработка сайтов
    • Обслуживание сайтов
    • Техподдержка сайтов
    • Веб-разработка
    • Интернет-магазины
  • Модули
    • Антирутин
    • SMS-уведомления
    • Импорт данных
    • Простые отзывы
    • Древовидный прайс-лист
    • Всплывающие окна
    • Редиректы для SEO
    • Восстановление данных
    • Бегущая строка
    • Утилиты от «Webdebug»
    • SMS-сообщения (Lite)

    • Все наши модули

    • Все модули Битрикс:Marketplace
  • Акции
  • Поддержка
  • Блог
  • О компании
    • Отзывы
    • Новости
    • Реквизиты

    • Контакты
Главная
Модули «1С-Битрикс: Маркетплейс»
Категория: Инструменты
«Всплывающие окна - для уведомлений, рекламы, веб-форм и др.»: модуль для 1С-Битрикс
webdebug.popup

«Всплывающие окна - для уведомлений, рекламы, веб-форм и др.»: модуль для 1С-Битрикс

Купить: 1 500 руб. Онлайн-демо
  • Описание
  • Примеры
  • Установка
  • Помощь
  • История
  • FAQ
  • Вопрос?
Быстро и бесплатно установим и настроим данный модуль на Вашем сайте!

  • Подходящие редакции 1С-Битрикс: Первый сайт, Старт, Стандарт, Эксперт, Малый бизнес, Бизнес
  • Включает в себя: Компоненты
  • Категории: Інструменти, Контент-менеджеру, Другое
  • Название компании-партнера: Webdebug
  • Последняя версия: 1.0.33
  • Дата обновления: 27.03.2018
  • Дата публикации: 07.11.2013
  • Число установок: Более 1000 раз
  • Адаптивность: Нет
  • Поддержка композита: Нет
  • Совместимо с Сайты24: Нет

Руководство PDF

Модуль предоставляет компонент с возможностью быстрого и удобного создания всплывающих окон.

Внимание! Модуль позволяет разместить во всплывающем окне практически любое содержимое:
  • форма обратной связи,
  • форма заказа обратного звонка,
  • форма "Задать вопрос",
  • схема проезда (Яндекс или Google),
  • таблица характеристик или подробное описание товара,
  • калькулятор услуг,
  • важное сообщение для пользователей (с возможностью показа пользователю только один раз),
  • уведомление о добавлении товара в корзину,
  • и др.

Данный модуль позволяет мгновенно сделать на сайте любые всплывающие окна, в том числе:
  • заказ обратного звонка,
  • заказ услуг,
  • дополнительная информация о товаре,
  • формы с AJAX-загрузкой содержимого (AJAX-загрузка форм особенно полезна в борьбе со СПАМом),
  • быстрый просмотр товаров, просмотр других сайтов во всплывающем окне.
Компонент имеет несколько предопределенных схем оформления, которые можно легко менять. Компонент сам автоматически определяет наличие на странице подключенного jQuery, и при необходимости подключает его.

Компонент имеет около двух десятков настроек, которые позволяют настроить все "под себя", которые также позволяют получить контроль над всплывающим окном с помощью JS-событий.

Модуль имеет собственное API, позволяющее реализовать практически любую логику появления всплывающих окон. Информация по API опубликована в PDF-руководстве.

Стиль 1 (простой текст в двух абзацах):

Открыть
×
Простой текст в двух абзацах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Закрыть

Стиль 2 (простой контент с картинкой):

Открыть
×
Простой контент с картинкой

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Webdebug (ООО «Веб дебаг»)

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Стиль 3 (карта сайта):

Открыть
×
Карта сайта

Стиль 4 (видео из Youtube):

Открыть
×
Видео из Youtube

Стиль 5 (вариант игры «Тетрис» в iFrame):

Открыть
×
Вариант игры «Тетрис» в iFrame

Нажимайте одну из кнопок, чтобы управлять движущимися блоками: Z, X, C, V, пробел, левая кнопка мыши. Если кнопки не работают, щелкните левой кнопкой мыши внутри окна с тетрисом, чтобы установить фокус на окно.

Вы также можете открыть игру в отдельном окне (напр., если игра «тормозит»)

Стиль 6 (частые вопросы по модулю всплывающих окон):

Открыть
×
Частые вопросы по модулю всплывающих окон
Как продлить DEMO?

Если Вы установили демо-версию модуля и демонстрационный режим истек, но Вы не успели попробовать модуль в работе, сообщите об этом нам, мы можем повторно включить демо-режим. В общем случае, для сброса демо-режима нужно выполнить следующие указания:

  1. создать рез. копию сайта, хотя бы базы данных,

  2. деинсталлировать модуль,

  3. стереть данный модуль с сайта (соотв. опция доступна в списке модулей),

  4. выполнить SQL-запрос (в админке на соотв. странице в разделе "Инструменты": Административный раздел - Настройки - Инструменты - SQL-запрос):

    DELETE FROM `b_option` WHERE `MODULE_ID`='webdebug.popup';

  5. сообщить нам (укажите адрес сайта и владельца лицензии) для удаления нами упоминаний об использовании демо на Вашем сайте,

  6. после нашего ответа повторно установить модуль из Маркетплейс .

После установки модуля не появился компонент. Что делать?

Если после установки модуля в списке компонентов (в визуальном редакторе) не появился компонент, необходимо сбросить кеш компонентов:

#IMAGE.DESCRIPTION#

Как сделать в шаблоне сайта всплывающее окно, чтобы оно показывалось для каждого пользователя только один раз?

<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'test',
		'NAME' => 'Проверка',
		'WIDTH' => '420',
		'CLOSE' => 'Y',
		'APPEND_TO_BODY' => 'Y',
		'CLASSES' => array('wd_popup_style_05'),
		'LINK_TO' => '',
		'AUTOOPEN' => 'Y',
		'AUTOOPEN_DELAY' => '500',
		'AUTOOPEN_ONCE' => 'Y',
		'AUTOOPEN_TERM' => '365',
		'AUTOOPEN_PATH' => 'N',
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<p>Проверка</p>
	<?=CWD_Popup::EndEx();?>
<?endif?>
Компонент ломает верстку!
В данном случае возможны различные варианты причины проблем:
  1. проверьте, что в контенте всплывающих окон (редактируемые области) нет подключения служебных файлов битрикса - header.php и footer.php - их там быть не должно! Должен быть только контент.
  2. компонент нельзя размещать в шаблонах (файлы template.php и result_modifier.php) других компонентов, которые работают в режиме кеширования. Например, в bitrix:catalog.section или bitrix:catalog.element. Компонент bitrix:catalog не работает в режиме кеширования, поэтому в нем подключение возможно. Также возможно подключение всплывающих окон в файлах component_epilog.pgp шаблонов всех компонентов.
  3. «поломана» верстка внутри контента всплывающего окна.
  4. другие проблемы, для решения которых можете обратиться к нам (поможем бесплатно).

Как сделать быстрый просмотр с модулем всплывающих окон?
Все относительно несложно.

Быстрый просмотр делается, обычно, для списка товаров, т.е. в шаблоне компонента 
bitrix:catalog.section. В плане реализации есть две схемы:

1. на все товары создается одно единственное всплывающее окно, и каждый раз при быстром просмотре 
информация подгружается по AJAX.

2. у каждого товара свое всплывающее окно, и открытие таких окошек происходит без AJAX.

В общем случае рекомендуем первый вариант, т.к. во втором случае при большом количестве товаров создается много окон, и страница может загружаться медленнее.

Реализация первого варианта следующая:
в файле component_epilog.php шаблона компонента bitrix:catalog.section вставляете код подключения всплывающего окна (подключение через API, а не через компонент), устанавливаете параметр "CALLBACK_SHOW" (т.е. действие, которое будет при каждом открытии окна, например, "ShowFastPreview"), устанавливаете css-селектор ссылок открытия (напр., всем ссылкам, открывающим быстрый просмотр в шаблоне задайте class="fast_preview" и селектор тогда используйте ".fast_preview") затем там же пишите JS-код для данного CALLBACK_SHOW:
<script>
function ShowFastPreview(PopupWindow, PopupContent, Link){
	var ProductID = Link.attr('data-id');
	$.ajax({
		url: 'здесь URL к файлу с быстрым просмотром',
		type: 'GET',
		data: 'product_id='+ProductID,
		success: function(HTML) {
			$(PopupContent).html(HTML);
		}
	});
}
</script>

Далее, каждой ссылке, открывающей быстрый просмотр, нужно добавить атрибут data-id с ID товара, например, <a href="#" data-id="<?=$arElement['ID'];?>">Быстрый просмотр</a>

И осталось только создать файл для AJAX-загрузки карточки товара в режиме быстрого просмотра. 
Например, /ajax/fast_preview.php. В нем - подключение служебных скриптов, например:
<?
define('NO_KEEP_STATISTIC', true); 
define('NOT_CHECK_PERMISSIONS', true);
define('PUBLIC_AJAX_MODE', true); 
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
$ProductID = IntVal($_GET['product_id']);
тут код компонента карточки товара
?>

И в этом файле разместить компонент bitrix:catalog.element, у которого нужно (предварительно) настроить все параметры, в т.ч. указать инфоблок и в качестве ID товара - $ProductID. Стили в компоненте (style.css) настраивать не получится, т.к. при ajax-подгрузке они не будут загружаться, поэтому их лучше размещать или в общем файле стилей template_styles.css, или как-то подключать в том же component_epilog.php.

В целом, это все. Остается только донастроить все под Ваш конкретный случай.
Как поместить во всплывающее окно форму обратной связи или любую другую форму?
Сложность здесь заключается в том, что если просто разместить форму во всплывающем окне, то при отправке данных страница перезагружается, и окно закрывается.

Проблема заключается в следующем: во всплывающем окне размещена обычная веб-форма (<form>). Поэтому при отправке данных она, как и положено, перезагружает страницу.

Пример решения данной проблемы:
  1. Во всплывающее окно поместить форму обратной связи (или любой другой компонент с формой для заполнения, напр., форма обратного звонка). Настроить данный компонент.
  2. Имейте ввиду, что компонент не должен препятствовать логикой своего кода нормальной отправке данных из формы (в частности, он должен поддерживать отправку и прием данных формы без любых перенаправлений). Например, стандартная форма обратной связи (bitrix:main.feedback) после отправки данных делает перенаправление на страницу с параметром "success", поэтому без полной перезагрузки страницы такой компонент работать не сможет. В данном случае нужно поступить так: найти в коде компонента (/bitrix/components/bitrix/main.feedback/component) строчку, начинающуюся с "LocalRedirect(..." (в актуальной сегодня версии Битрикс это строчка 78), поставить перед ней символ решетки (это превращает сточку кода в комментарий, который не исполняется). А перед указанной строкой добавит еще одну, которая будет выводить текст об успешном заполнении без перезагрузки:
    $arResult["OK_MESSAGE"] = $arParams["OK_TEXT"];
  3. В шаблоне компонента обратной связи добавить две строчки. Одну в самом начале (т.е. эта строчка должна быть первой):
    <?if($_REQUEST['ajax_form']=='Y') {$APPLICATION->RestartBuffer();}?>
    другую в самом конце (т.е. последняя строка):
    <?if($_REQUEST['ajax_form']=='Y') {die();}?>
  4. Для нашего компонента "Всплывающее окно" задать параметр "JS-функция при первом открытии всплывающего окна". К примеру, задайте "popup_feedback_open".
  5. Затем, необходимо добавить код соответствующей функции. Его можно добавить в любом месте шаблона сайта, или страницы, или даже в любой файл JS-скриптов сайта (без тегов <script>, </script>):
    <script>
    function WD_UpdateForm(Form, PopupContent) {
    	$.ajax({
    		url: Form.attr('action'),
    		type: Form.attr('method'),
    		data: Form.serialize() + '&submit=Y&ajax_form=Y',
    		success: function(HTML) {
    		PopupContent.html(HTML); }
    	});
    }
    function popup_feedback_open(PopupWindow, PopupContent, Link){
    	PopupContent.delegate('form','submit',function(Event){
    		Event.preventDefault();
    		WD_UpdateForm($(this),PopupContent);
    	}); 
    }
    </script>
  6. После этого при отправке данных форма не будет перезагружать страницу, а будет отправлять и получать данные через AJAX.
Что делать, если содержимое окна выводится прямо на странице, сразу после кнопки?
Проблема связана с кеширование компонента: ошибка говорит о том, что компонент включаемой области расположен внутри другого компонента (обычно это компонент bitrix:catalog.element: либо самостоятельно, либо в составе комплексного компонента bitrix:catalog), работающего с кешированием. Проблема возникает из-за того, что при кешировании компонент выводит то, что "запомнил" ранее, не подключая служебные файлы (в данном случае это файл стилей, который как раз скрывает окно, и файл скрипта, который заставляет кнопку и окно работать).

Решение такое: подключать эти служебные скрипты вручную (см. далее), перед использованием компонента. Это обязательно нужно сделать там, где область страницы не кешируется. Если используется комплексный компонент bitrix:catalog, то подключение лучше всего выполнить в файле element.php шаблона компонента. Если Вам сложно определить, какой компонент используется и куда лучше прописать подключение служебных файлов, пропишите их в самое начало шаблона сайта - файл header.php (имейте ввиду - на сайте может использоваться несколько шаблонов, поэтому прописать нужно во всех, где планируется использовать всплывающие окна), либо в файл /bitrix/php_interface/init.php.

Код для ручного подключения служебных файлов:
  • при подключении из шаблонов:
    <?if(CModule::IncludeModule('webdebug.popup')){CWD_Popup::Init(true);}?>
  • при подключении из /bitrix/php_interface/init.php:
    if(CModule::IncludeModule('webdebug.popup')){CWD_Popup::Init(true);}

Upd.: Также в обновлении 1.0.12 добавлена опция (в настройках модуля), которая сама выполняет все указанные действия на всех страницах сайта.
Что означает опция «Скрывать окно»?

Данная опция означает, что к всплывающему окну при открытии страницы сайта будет применен CSS-стиль display:none, что означает, что окна как будто и нет. По умолчанию же вместо этого используется visibility:hidden, определяющее, что окно скрыто, но при этом Flash-содержимое не "считает", что окно скрыто, и показывает контент даже закрытого окна.

Также это означает, что после закрытия всплывающего окна к нему будет также применен стиль display:none, с целью предотвратить проигрывание видео в фоне даже после закрытия страницы.

Можно ли сделать форму, которая будет автоматически обрабатывать SUBMIT
Используйте обработчик создания окна (настройка компонента - "JS-функция при создании всплывающего окна", или для API - "CALLBACK_OPEN"). Например, укажите "my_popup_create".

А далее, скопируйте себе JavaScript-функцию:
function my_popup_create(PopupWindow, PopupContent, Link) {
	// Эта конструкция создает постоянный обработчик, который перехвачивает событие submit и сам отправляет данные
	$(document).on('submit','#'+PopupWindow.attr('id')+' form',function(){
		WD_Popup_AJAX(PopupContent, '/popup.php', $(this).serialize(), function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
		return false;
	});
	// Эта функция делает первоначальный AJAX-запрос для получения контента окна
	WD_Popup_AJAX(PopupContent, '/popup.php', '', function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
}

Не забудьте, что в получаемом контент должна быть HTML-форма с лежащим внутри сабмиттом (или отправляемая программно).

Как придать форме стиль, которого в модуле нет?
Для начала откройте файл /bitrix/themes/.default/webdebug.popup.css и посмотрите стили для класса wd_popup_style_01. Для настройки своих стилей можете скопировать эти строчки CSS-стилей (не забудьте их переименовать, напр, в "my_style"). После этого в настройках компонента укажите этот класс в поле "CSS-классы" (для API это ключ массива "CLASSES").

Вы также можете обратиться к нам с просьбой добавить новые стили оформления окон. Это будет сделано достаточно быстро и абсолютно бесплатно.
Как сделать загрузку контента окна не из файла, а из компонента?
Для этого разместите следующий код в нужном месте и настройте под свои нужды:
<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'callme',
		'NAME' => 'Заказ обратного звонка!',
		'WIDTH' => '400',
		'CALLBACK_OPEN' => 'popup_callme_open',
		'CLASSES' => array('wd_popup_style_01'),
		'LINK_TO' => 'a.callme',
		'APPEND_TO_BODY'=>'Y'
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<div>Здесь любой контент формы</div>
	<?=CWD_Popup::EndEx();?>
<?endif?>

Далее остается только создать на странице ссылку с классом "callme":

<a href="#" class="callme">Заказать обратный звонок</a>
Возможно ли сделать так, чтобы окно открывалось автоматически при загрузке страницы?
Да, это возможно, выпущено в обновлении модуля 1.0.3. Все, что требуется настроить - интервал задержки (в миллисекундах) между открытием страницы и появления всплывающего окна.
Дополнительный функционал - разрабатывается уже в каждом конкретном случае отдельно. Например, если Вам необходимо автоматически открывать окно только на главной странице, воспользуйтесь API Битрикс: функция "$APPLICATION->GetCurPage(thue)".

Также, в обновлении 1.0.18 реализована возможность однократного открытия окна (это полезно в случае уведомления пользователей о чем-то важном всего один раз).

Стиль 7 (простой текст в двух абзацах):

Открыть
×
Простой текст в двух абзацах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Закрыть

Стиль 8 (форма обратной связи):

Открыть
×
Форма обратной связи

Внимание! Данная форма приведена в качестве примера.

Ваше имя*
Ваш E-mail*
Сообщение*

Стиль 9 (простой текст в двух абзацах):

Открыть
×
Простой текст в двух абзацах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Закрыть

Стиль 10 (простой текст в двух абзацах):

Открыть
×
Простой текст в двух абзацах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Закрыть

Стиль 11 (простой текст в двух абзацах):

Открыть
×
Простой текст в двух абзацах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor ipsum, ultrices ac dignissim feugiat, auctor vel eros. Proin condimentum, neque vitae eleifend pretium, mi arcu condimentum magna, sit amet placerat dui augue sed ante. Vivamus ac nisl libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum ullamcorper pretium.

Aenean posuere volutpat erat, vitae venenatis turpis bibendum eu. Aliquam at magna augue. Ut nulla nisl, gravida in facilisis a, posuere pulvinar diam. Ut non venenatis nisl. Vivamus at consequat leo. Proin pretium scelerisque pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut vestibulum odio. Vestibulum ultricies felis euismod purus fringilla faucibus et vel ligula. In viverra neque justo, sit amet sodales purus. Praesent eleifend, est at volutpat dignissim, tortor nulla bibendum magna, in dapibus sem odio sit amet neque. Duis dapibus pulvinar lobortis. Etiam malesuada accumsan libero a cursus. Ut suscipit, justo eu mollis rhoncus, erat nisl vulputate felis, vitae sagittis tellus tellus nec arcu.

Закрыть
Руководство PDF

Установка стандартная. После установки появляется новый компонент "Всплывающее окно" в секции "Webdebug [Веб-дебаг]", необходимо разместить его на странице и настроить. Редактирование содержимого всплывающего окна осуществляется абсолютно аналогично компоненту "Включаемая область".

Установка без включаемой области (контент задается вручную, можно использовать на странице товара для вывода объемной информации, для показа окна после добавления товара в корзину и т.д. - практически применение безгранично):

Пример использования API:
<?if(CModule::IncludeModule('webdebug.popup')):?>
   <?CWD_Popup::Init(true);?>
   <?$arPopup = array(
            'ID' => 'add2cart',
            'NAME' => 'Товар добавлен в корзину',
            'WIDTH' => '420',
            'CLOSE' => 'Y',
            'APPEND_TO_BODY' => 'N',
            'CLASSES' => array('wd_popup_style_02'),
            'LINK_TO' => 'a.add2cart_popup',
   );?>
   <?=CWD_Popup::BeginEx($arPopup);?>
   <p>Товар добавлен в корзину!</p>
   <?=CWD_Popup::EndEx();?>
<?endif?>

Внимание! Если после установки на сайт, щелчок по ссылке затемняет фон сайта, но не открывает окошко, установите галочку для опции "Перемещать в BODY" (параметр «APPEND_TO_BODY»).
  • Руководство по использованию модуля (PDF, 2.21 МБ)

Пример использования API-способа подключения всплывающего окна:

<?if(CModule::IncludeModule('webdebug.popup')):?>
   <?CWD_Popup::Init(true);?>
   <?$arPopup = array(
            'ID' => 'add2cart',
            'NAME' => 'Товар добавлен в корзину',
            'WIDTH' => '420',
            'CLOSE' => 'Y',
            'APPEND_TO_BODY' => 'N',
            'CLASSES' => array('wd_popup_style_02'),
            'LINK_TO' => 'a.add2cart_popup',
   );?>
   <?=CWD_Popup::BeginEx($arPopup);?>
   <p>Товар добавлен в корзину!</p>
   <?=CWD_Popup::EndEx();?>
<?endif?>
  • 1.0.33, 27.03.2018
    - для автооткрытия всплывающих окон добавлена возможность указывать интервал между автоматическими отрытиями в минутах (напр., 30m - 30 минут).
  • 1.0.32, 25.03.2018
    - исправления css-стилей для всплывающих окон (в т.ч. поддержка шаблонов, в которых используется box-sizing:border-box),
    - оптимизированы png-изображения,
    - другие незначительные исправления.
  • 1.0.31, 24.03.2018
    - исправлена проблема работы модуля при использовании на сайте jQuery-библиотеки reveal, - небольшой рефакторинг js-кода.
  • 1.0.30, 28.07.2017
    Исправления в JS-коде.
  • 1.0.29, 09.07.2016
    Небольшие улучшения.
  • 1.0.28, 29.02.2016
    Исправлена ошибка с определением ширины всплывающего окна.
  • 1.0.27, 26.02.2016
    Исправлена ошибка HTML-валидации при использовании модуля.
  • 1.0.26, 21.01.2016
    Добавлена возможность отмены автоматического открытия всплывающего окна.
  • 1.0.25, 20.05.2015
    Исправление JS-скриптов модуля
  • 1.0.24, 11.03.2015
    Исправление ошибок
  • 1.0.23, 01.03.2015
    Добавлена возможность создавать фиксированные окна (которые всегда видны вне зависимости от прокрутки страницы), добавлена возможность выравнивать окна по вертикали относительно страницы (для обычных окон - только при открытии, для фиксированных - также при изменении размеров браузера), изменен суффикс имени файла включаемой области по умолчанию (было "inc", стало "popup").
  • 1.0.22, 19.01.2015
    Небольшое исправление функционала автооткрытия окна.
  • 1.0.21, 18.01.2015
    Небольшие исправления z-index для всплывающих окон.
  • 1.0.20, 17.12.2014
    Исправлена ошибка, из-за которой всплывающие окна иногда переставали открываться после открытия диалоговых окон Битрикс.
  • 1.0.19, 06.12.2014
    Исправление ошибок.
  • 1.0.18, 09.11.2014
    Добавлена возможность однократного автоматического открытия окна. Добавлено пять новых схем оформления всплывающих окон. Изменен механизм выбора классов/стилей окна в параметрах компонента. Исправлена ошибка, из-за которой автооткрытие срабатывало не в каждый раз.
  • 1.0.17, 15.07.2014
    Исправлены ошибки.
  • 1.0.16, 14.07.2014
    Изменены надписи на кнопках контекстной панели. Исправлены ощибки.
  • 1.0.15, 11.07.2014
    Улучшена работа функции WD_Popup_Open(ID)
  • 1.0.14, 17.04.2014
    Доработка модуля для работы на всех версиях jQuery, начиная с 1.4.4 (теперь не придется менять название функции с on() на live()), в т.ч. и последняя на сегодня версия - 2.1.0.
  • 1.0.13, 04.04.2014
    Исправление незначительной ошибки.
  • 1.0.12, 03.04.2014
    Добавлена возможность автоматического подключения клиентских CSS и JS-файлов. Исправление ошибок.
  • 1.0.11, 24.03.2014
    Исправление ошибок.
  • 1.0.10, 24.03.2014
    Доработан механизм закрытия всплывающих окон: функция WD_Popup_Close(ID) Добавлена функция открытия окна по ID: WD_Popup_Open(ID)
  • 1.0.9, 24.03.2014
    Улучшен механизм отмены кнопки закрытия: теперь при этом пропадает возможность закрыть окно клавишей Esc.
  • 1.0.8, 15.03.2014
    Исправлена ошибка связанная с опцией "Скрывать окно".
  • 1.0.7, 18.12.2013
    Исправлена небольшая ошибка в стилях, связанная с позиционированием.
  • 1.0.6, 18.12.2013
    Исправлена ошибка, при которой после закрытия окна с видео, оно продолжает работать в фоне.
  • 1.0.5, 15.12.2013
    Добавлена возможность скрытия окна для возможности отображения Flash и других элементов.
  • 1.0.4, 15.12.2013
    Исправление ошибки опции перемещения окна в тело страницы.
  • 1.0.3, 13.12.2013
    Большое обновление, добавляющее функционал автоматического открытия всплывающего окна при загрузке страницы. Обновление также добавляет опции задержки при открытии страницы, скрытия ссылки. Также добавлена возможность указывать callback при закрытия всплывающего окна, что может использоваться для механизма однократного показа всплывающего окна.
  • 1.0.2, 13.12.2013
    Исправлена ошибка, по которой без авторизации окошко иногда не открывалось (ошибка возникала, если не был определен объект BX с функцией ready()).
  • 1.0.1, 12.11.2013
    Исправлена ошибка, из-за которой всплывающие окна не появляются на версии jQuery 1.10.x, Исправлен z-index (по умолчанию) всплывающих окон со 101 на 1001, затемняющего фона - со 100 до 1000, Изменен шаблон по-умолчанию, В метод CWD_Popup::Init() добавлен параметр $Force, позволяющий добавлять на страницу необходимые CSS- и JS-файлы без объявления константы WD_POPUP_NEED_INCLUDE.
Как продлить DEMO?

Если Вы установили демо-версию модуля и демонстрационный режим истек, но Вы не успели попробовать модуль в работе, сообщите об этом нам, мы можем повторно включить демо-режим. В общем случае, для сброса демо-режима нужно выполнить следующие указания:

  1. создать рез. копию сайта, хотя бы базы данных,

  2. деинсталлировать модуль,

  3. стереть данный модуль с сайта (соотв. опция доступна в списке модулей),

  4. выполнить SQL-запрос (в админке на соотв. странице в разделе "Инструменты": Административный раздел - Настройки - Инструменты - SQL-запрос):

    DELETE FROM `b_option` WHERE `MODULE_ID`='webdebug.popup';

  5. сообщить нам (укажите адрес сайта и владельца лицензии) для удаления нами упоминаний об использовании демо на Вашем сайте,

  6. после нашего ответа повторно установить модуль из Маркетплейс .

Возможно ли сделать так, чтобы окно открывалось автоматически при загрузке страницы?
Да, это возможно, выпущено в обновлении модуля 1.0.3. Все, что требуется настроить - интервал задержки (в миллисекундах) между открытием страницы и появления всплывающего окна.
Дополнительный функционал - разрабатывается уже в каждом конкретном случае отдельно. Например, если Вам необходимо автоматически открывать окно только на главной странице, воспользуйтесь API Битрикс: функция "$APPLICATION->GetCurPage(thue)".

Также, в обновлении 1.0.18 реализована возможность однократного открытия окна (это полезно в случае уведомления пользователей о чем-то важном всего один раз).
Как сделать загрузку контента окна не из файла, а из компонента?
Для этого разместите следующий код в нужном месте и настройте под свои нужды:
<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'callme',
		'NAME' => 'Заказ обратного звонка!',
		'WIDTH' => '400',
		'CALLBACK_OPEN' => 'popup_callme_open',
		'CLASSES' => array('wd_popup_style_01'),
		'LINK_TO' => 'a.callme',
		'APPEND_TO_BODY'=>'Y'
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<div>Здесь любой контент формы</div>
	<?=CWD_Popup::EndEx();?>
<?endif?>

Далее остается только создать на странице ссылку с классом "callme":

<a href="#" class="callme">Заказать обратный звонок</a>
Как придать форме стиль, которого в модуле нет?
Для начала откройте файл /bitrix/themes/.default/webdebug.popup.css и посмотрите стили для класса wd_popup_style_01. Для настройки своих стилей можете скопировать эти строчки CSS-стилей (не забудьте их переименовать, напр, в "my_style"). После этого в настройках компонента укажите этот класс в поле "CSS-классы" (для API это ключ массива "CLASSES").

Вы также можете обратиться к нам с просьбой добавить новые стили оформления окон. Это будет сделано достаточно быстро и абсолютно бесплатно.
Можно ли сделать форму, которая будет автоматически обрабатывать SUBMIT
Используйте обработчик создания окна (настройка компонента - "JS-функция при создании всплывающего окна", или для API - "CALLBACK_OPEN"). Например, укажите "my_popup_create".

А далее, скопируйте себе JavaScript-функцию:
function my_popup_create(PopupWindow, PopupContent, Link) {
	// Эта конструкция создает постоянный обработчик, который перехвачивает событие submit и сам отправляет данные
	$(document).on('submit','#'+PopupWindow.attr('id')+' form',function(){
		WD_Popup_AJAX(PopupContent, '/popup.php', $(this).serialize(), function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
		return false;
	});
	// Эта функция делает первоначальный AJAX-запрос для получения контента окна
	WD_Popup_AJAX(PopupContent, '/popup.php', '', function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
}

Не забудьте, что в получаемом контент должна быть HTML-форма с лежащим внутри сабмиттом (или отправляемая программно).

Что означает опция «Скрывать окно»?

Данная опция означает, что к всплывающему окну при открытии страницы сайта будет применен CSS-стиль display:none, что означает, что окна как будто и нет. По умолчанию же вместо этого используется visibility:hidden, определяющее, что окно скрыто, но при этом Flash-содержимое не "считает", что окно скрыто, и показывает контент даже закрытого окна.

Также это означает, что после закрытия всплывающего окна к нему будет также применен стиль display:none, с целью предотвратить проигрывание видео в фоне даже после закрытия страницы.

Что делать, если содержимое окна выводится прямо на странице, сразу после кнопки?
Проблема связана с кеширование компонента: ошибка говорит о том, что компонент включаемой области расположен внутри другого компонента (обычно это компонент bitrix:catalog.element: либо самостоятельно, либо в составе комплексного компонента bitrix:catalog), работающего с кешированием. Проблема возникает из-за того, что при кешировании компонент выводит то, что "запомнил" ранее, не подключая служебные файлы (в данном случае это файл стилей, который как раз скрывает окно, и файл скрипта, который заставляет кнопку и окно работать).

Решение такое: подключать эти служебные скрипты вручную (см. далее), перед использованием компонента. Это обязательно нужно сделать там, где область страницы не кешируется. Если используется комплексный компонент bitrix:catalog, то подключение лучше всего выполнить в файле element.php шаблона компонента. Если Вам сложно определить, какой компонент используется и куда лучше прописать подключение служебных файлов, пропишите их в самое начало шаблона сайта - файл header.php (имейте ввиду - на сайте может использоваться несколько шаблонов, поэтому прописать нужно во всех, где планируется использовать всплывающие окна), либо в файл /bitrix/php_interface/init.php.

Код для ручного подключения служебных файлов:
  • при подключении из шаблонов:
    <?if(CModule::IncludeModule('webdebug.popup')){CWD_Popup::Init(true);}?>
  • при подключении из /bitrix/php_interface/init.php:
    if(CModule::IncludeModule('webdebug.popup')){CWD_Popup::Init(true);}

Upd.: Также в обновлении 1.0.12 добавлена опция (в настройках модуля), которая сама выполняет все указанные действия на всех страницах сайта.
Как поместить во всплывающее окно форму обратной связи или любую другую форму?
Сложность здесь заключается в том, что если просто разместить форму во всплывающем окне, то при отправке данных страница перезагружается, и окно закрывается.

Проблема заключается в следующем: во всплывающем окне размещена обычная веб-форма (<form>). Поэтому при отправке данных она, как и положено, перезагружает страницу.

Пример решения данной проблемы:
  1. Во всплывающее окно поместить форму обратной связи (или любой другой компонент с формой для заполнения, напр., форма обратного звонка). Настроить данный компонент.
  2. Имейте ввиду, что компонент не должен препятствовать логикой своего кода нормальной отправке данных из формы (в частности, он должен поддерживать отправку и прием данных формы без любых перенаправлений). Например, стандартная форма обратной связи (bitrix:main.feedback) после отправки данных делает перенаправление на страницу с параметром "success", поэтому без полной перезагрузки страницы такой компонент работать не сможет. В данном случае нужно поступить так: найти в коде компонента (/bitrix/components/bitrix/main.feedback/component) строчку, начинающуюся с "LocalRedirect(..." (в актуальной сегодня версии Битрикс это строчка 78), поставить перед ней символ решетки (это превращает сточку кода в комментарий, который не исполняется). А перед указанной строкой добавит еще одну, которая будет выводить текст об успешном заполнении без перезагрузки:
    $arResult["OK_MESSAGE"] = $arParams["OK_TEXT"];
  3. В шаблоне компонента обратной связи добавить две строчки. Одну в самом начале (т.е. эта строчка должна быть первой):
    <?if($_REQUEST['ajax_form']=='Y') {$APPLICATION->RestartBuffer();}?>
    другую в самом конце (т.е. последняя строка):
    <?if($_REQUEST['ajax_form']=='Y') {die();}?>
  4. Для нашего компонента "Всплывающее окно" задать параметр "JS-функция при первом открытии всплывающего окна". К примеру, задайте "popup_feedback_open".
  5. Затем, необходимо добавить код соответствующей функции. Его можно добавить в любом месте шаблона сайта, или страницы, или даже в любой файл JS-скриптов сайта (без тегов <script>, </script>):
    <script>
    function WD_UpdateForm(Form, PopupContent) {
    	$.ajax({
    		url: Form.attr('action'),
    		type: Form.attr('method'),
    		data: Form.serialize() + '&submit=Y&ajax_form=Y',
    		success: function(HTML) {
    		PopupContent.html(HTML); }
    	});
    }
    function popup_feedback_open(PopupWindow, PopupContent, Link){
    	PopupContent.delegate('form','submit',function(Event){
    		Event.preventDefault();
    		WD_UpdateForm($(this),PopupContent);
    	}); 
    }
    </script>
  6. После этого при отправке данных форма не будет перезагружать страницу, а будет отправлять и получать данные через AJAX.
Как сделать быстрый просмотр с модулем всплывающих окон?
Все относительно несложно.

Быстрый просмотр делается, обычно, для списка товаров, т.е. в шаблоне компонента 
bitrix:catalog.section. В плане реализации есть две схемы:

1. на все товары создается одно единственное всплывающее окно, и каждый раз при быстром просмотре 
информация подгружается по AJAX.

2. у каждого товара свое всплывающее окно, и открытие таких окошек происходит без AJAX.

В общем случае рекомендуем первый вариант, т.к. во втором случае при большом количестве товаров создается много окон, и страница может загружаться медленнее.

Реализация первого варианта следующая:
в файле component_epilog.php шаблона компонента bitrix:catalog.section вставляете код подключения всплывающего окна (подключение через API, а не через компонент), устанавливаете параметр "CALLBACK_SHOW" (т.е. действие, которое будет при каждом открытии окна, например, "ShowFastPreview"), устанавливаете css-селектор ссылок открытия (напр., всем ссылкам, открывающим быстрый просмотр в шаблоне задайте class="fast_preview" и селектор тогда используйте ".fast_preview") затем там же пишите JS-код для данного CALLBACK_SHOW:
<script>
function ShowFastPreview(PopupWindow, PopupContent, Link){
	var ProductID = Link.attr('data-id');
	$.ajax({
		url: 'здесь URL к файлу с быстрым просмотром',
		type: 'GET',
		data: 'product_id='+ProductID,
		success: function(HTML) {
			$(PopupContent).html(HTML);
		}
	});
}
</script>

Далее, каждой ссылке, открывающей быстрый просмотр, нужно добавить атрибут data-id с ID товара, например, <a href="#" data-id="<?=$arElement['ID'];?>">Быстрый просмотр</a>

И осталось только создать файл для AJAX-загрузки карточки товара в режиме быстрого просмотра. 
Например, /ajax/fast_preview.php. В нем - подключение служебных скриптов, например:
<?
define('NO_KEEP_STATISTIC', true); 
define('NOT_CHECK_PERMISSIONS', true);
define('PUBLIC_AJAX_MODE', true); 
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
$ProductID = IntVal($_GET['product_id']);
тут код компонента карточки товара
?>

И в этом файле разместить компонент bitrix:catalog.element, у которого нужно (предварительно) настроить все параметры, в т.ч. указать инфоблок и в качестве ID товара - $ProductID. Стили в компоненте (style.css) настраивать не получится, т.к. при ajax-подгрузке они не будут загружаться, поэтому их лучше размещать или в общем файле стилей template_styles.css, или как-то подключать в том же component_epilog.php.

В целом, это все. Остается только донастроить все под Ваш конкретный случай.
Компонент ломает верстку!
В данном случае возможны различные варианты причины проблем:
  1. проверьте, что в контенте всплывающих окон (редактируемые области) нет подключения служебных файлов битрикса - header.php и footer.php - их там быть не должно! Должен быть только контент.
  2. компонент нельзя размещать в шаблонах (файлы template.php и result_modifier.php) других компонентов, которые работают в режиме кеширования. Например, в bitrix:catalog.section или bitrix:catalog.element. Компонент bitrix:catalog не работает в режиме кеширования, поэтому в нем подключение возможно. Также возможно подключение всплывающих окон в файлах component_epilog.pgp шаблонов всех компонентов.
  3. «поломана» верстка внутри контента всплывающего окна.
  4. другие проблемы, для решения которых можете обратиться к нам (поможем бесплатно).

Как сделать в шаблоне сайта всплывающее окно, чтобы оно показывалось для каждого пользователя только один раз?

<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'test',
		'NAME' => 'Проверка',
		'WIDTH' => '420',
		'CLOSE' => 'Y',
		'APPEND_TO_BODY' => 'Y',
		'CLASSES' => array('wd_popup_style_05'),
		'LINK_TO' => '',
		'AUTOOPEN' => 'Y',
		'AUTOOPEN_DELAY' => '500',
		'AUTOOPEN_ONCE' => 'Y',
		'AUTOOPEN_TERM' => '365',
		'AUTOOPEN_PATH' => 'N',
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<p>Проверка</p>
	<?=CWD_Popup::EndEx();?>
<?endif?>
После установки модуля не появился компонент. Что делать?

Если после установки модуля в списке компонентов (в визуальном редакторе) не появился компонент, необходимо сбросить кеш компонентов:

test


  • Мы рассматриваем любые Ваши вопросы, связанные с данным модулем,
  • перед тем, как задать вопрос, ознакомьтесь со списком частых вопросов, на которые уже получены ответы, возможно и на Ваш вопрос уже составлен ответ (вкладка «Вопрос-ответ»),
  • время реакции составляет от 5 минут до 2 рабочих дней (в зависимости от загруженности),
  • быстрее всего Вы получите ответ, если зададите его прямо здесь, а не по другим средствам связи (e-mail, icq, skype),
    по телефону техническую поддержку по модулям не оказываем.



Ссылки
  • Главная
  • Модули
  • Акции
  • Услуги
  • Отзывы
  • Блог
  • Новости
  • Контакты
  • Реквизиты
Поиск по сайту
Наши контакты

По всем вопросам обращайтесь:

Электронная почта: info@webdebug.ru

Контактный телефон: (861) 241-08-50

WhatsApp: +7-988-241-08-50

Viber: +7-988-241-08-50

Telegram: webdebug

Skype (только переписка): webdebug

Форма обратной связи

Webdebug Bitrix certified
Webdebug QR-code
© ООО «Веб дебаг», 2011 – 2021. Политика конфиденциальности. Cайт работает на лучшей в мире CMS.
×
У Вас вопрос?
Загрузка ...
×
Связаться с нами
Загрузка ...
×
Установка модуля

Внимание! Повторная установка в демо-режиме приведет к окончанию демо‑режима и невозможности использовать модуль.

Если Вы не успели попробовать модуль, напишите нам, мы поможем

×
Запрос на приобретение
и настройку модуля
Загрузка ...