Только пользователям разрешено входить в центр администрирования. Войти

Всплывающие окна

Внимание! Для работы всплывающих окон необходимо разместить код скрипта 1 раз. Создайте «Блок/Меню» (разметив в Шапке/Hedaer, служебных тегах или Footer сайта). Текст блока (Код):
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-popup.js"></script>

Данный скрипт не установлен по умолчанию для увеличения производительности и большей гибкости сайтов.
После установки скрипта вы можете сгенерировать ссылку для всплывающего окна.
Рекомендуем вставить данный код в «Блок/Меню» с вашими другими скриптами.


Результат (ссылка):



Результат (span элемент):



Укажите параметры для всплывающего окна:

Тип загружаемых данных
  • * - блок с ID или Class'ом нужно предварительно создать на странице
  • ** - iFrame для загрузки любой HTML страницы
  • *** - передает GET переменную «p» (для использования страниц сайта)(например /ajax.php?p=путь href)
  • **** - передает GET переменную «shop_cat_p» (например /ajax.php?shop_cat_p=путь href) в которой можно указывать полный путь к странице карточки товара
  • ***** - Frame с Ajax страницей каталога статей, передает GET переменную «blog_cat_p» (например /ajax.php?blog_cat_p=путь href)
  • HTML - HTML данные загружаются с аналогичными переменными FRAME, но без использования блока iframe при отображении данных.


 ID/Class или Ссылка Заголовок окна Текст кнопки закрытия окна
(отображается только если указано значение) Текст ссылки/кнопки открытия окна Ширина окна Высота окна Автоматическая ширина и высота Автоматическая ширина и высота имеет больший приоритет чем изначальное значение ширины и высоты Автоматическая ширина окна (значение указывает минимальную возможную ширину) Автоматическая высота окна (значение указывает минимальную возможную высоту) Максимальная ширина и высота Вы можете ограничить максимальный развер окна, даже если используете автоматическую ширину и высоту. Максимальная ширина окна Максимальная высота окна Ширина мобильного окна
(если окно меньше указанного размера, то для него устанавливается указанное значение ширины)   Готово


[Пример кнопки - всплывающее окно с видео]


Код установки скрипта (вставляйте в блок меню или содержимое страниц 1 раз):
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-popup.js"></script>

Всплывающее окно может содержать текст, содержимое html блока, загрузку iframe (youtube или данные других сайтов) или ajax данные (ajax данные со страниц или статей вашего сайта).

Инструкция:

Используя код ниже, будет вызвано всплывающее окно.

 Code: html 
<a class="hotengine-script-popup" target="blank" data-iframe="2" data-width="0" data-height="0" data-auto-width="320" data-auto-height="320" data-max-height="500" data-max-width="750" data-mobile-width="768" data-title="Пример окна"  href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&amp;autoplay=1">Текст кнопки</a>

В параметрах ссылки можно указать следующие параметры:
  • data-iframe (тип загружаемых данных)
    • 2 - Frame полный путь url (например для загрузки youtube)
    • 3 - ID или Class со страницы (блок с ID или Class'ом нужно предварительно создать на странице)
    • 4 - Frame с данными страницы "p" (для использования страниц сайта)(например /ajax.php?p=путь href)
    • 5 - Frame с данными карточки товара "shop_cat_p" (например /ajax.php?shop_cat_p=путь href) в которой можно указывать полный путь к странице карточки товара
    • 1 - Frame с данными страницы каталога статей, передает GET переменную "blog_cat_p" (например /ajax.php?blog_cat_p=путь href) в которой можно указывать полный путь к статье
    • 11 - HTML данные страницы каталога статей, передает GET переменную "blog_cat_p" (например /ajax.php?blog_cat_p=путь href) в которой можно указывать полный путь к статье
    • 14 - HTML данные страницы "p" (для использования страниц сайта)(например /ajax.php?p=путь href)
    • 15 - HTML данные карточки товара "shop_cat_p" (например /ajax.php?shop_cat_p=путь href) в которой можно указывать полный путь к странице карточки товара
  • data-width - ширина окна
  • data-height - высота окна
  • data-auto-width - автоматическая ширина окна (значение указывает минимальную возможную ширину)
  • data-auto-height - автоматическая высота окна (значение указывает минимальную возможную высоту)
  • (автоматическая ширина и высота имеет больший приоритет чем изначальное значение ширины и высоты)
  • data-max-width - максимальная ширина окна
  • data-max-height - максимальная высота окна
  • data-mobile-width - ширина мобильного окна (если окно меньше указанного размера, то для него устанавливается указанное значение ширины)
  • data-title - Заголовок окна
  • href или data-href - путь открываемой страницы или get переменной
  • data-close-button - текст кнопки закрытия окна (отображается только если указано значение)


Пример всплывающего окна с Youtube видео:
 Code: html 
<a class="hotengine-script-popup" target="blank" data-iframe="2" data-width="0" data-height="0" data-auto-width="320" data-auto-height="320" data-max-height="500" data-max-width="750" data-mobile-width="768" data-title="Пример окна"  href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&amp;autoplay=1">Текст кнопки</a>

Результат: Текст кнопки


Пример кода

Назад