Только пользователям разрешено входить в центр администрирования. Войти
Всплывающие окна
Всплывающее окно может содержать текст, содержимое 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-header-fix="0" data-title="Пример окна" href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&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 - текст кнопки закрытия окна (отображается только если указано значение)
- data-unset-height - Удалиь стиль высоты контента внутри окна (дополнительный атрибут устраняющий лимит по высоте блока с контентом внутри окна) data-unset-height="1"
- data-header-fix - Зафиксировать заголовок окна
- data-close-overlay - Включить/Выключить закрытие окна при нажатии на область за ее пределами (дополнительный атрибут. Значения: «1» (включить), «0» (выключить)). По умолчанию - Включено (если не указано).
data-micromodal-close - Атрибут для закрытия открытого окна. Можно разместить в любом месте в контенте, который загружается внутри окна.
data-dialog-callback - Атрибут
data-dialog-callback позволяет указать имя функции, которая вызовется после открытия всплывающего окна.
Пример
Code: html
<a href="#" class="hotengine-script-popup" data-dialog-callback="myCustomFunction">Открыть</a>
<script>
function myCustomFunction() {
console.log("Callback выполнен!");
}
</script>data-dialog-button-callback - Атрибут
data-dialog-button-callback позволяет указать коллбек-функции для кнопок всплывающего окна. Формат: Название кнопки:callbackFunctionBtn, разделяем несколько кнопок запятой. Функции могут быть определены как до открытия окна, так и после — они будут вызываться при клике на кнопку, если функция существует.
Пример
Code: html
<a href="#" class="hotengine-script-popup" data-dialog-button-callback="Ok:callbackFunctionBtn1">Открыть</a>
<script>
window.callbackFunctionBtn1 = function() {
console.log("Нажата кнопка Ок");
};
</script>
Пример стиля CSS, который фиксирует несколько кнопок в нижней области всплывающего окна с добавлением подложки.
Пример
Code: CSS
#dialog_hotengine_script_popup .modal__container {
display: flex;
flex-direction: column;
max-height: 95vh;
}
#dialog_hotengine_script_popup .modal__content {
overflow-y: auto;
flex: 1 1 auto;
padding-bottom: 60px;
}
#dialog_hotengine_script_popup .modal__footer {
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 40px);
background: #fff;
padding: 10px 20px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 10;
display: flex;
justify-content: flex-start;
}
#dialog_hotengine_script_popup .modal__btn {
min-width: 80px; background: #0078d1;
color: #fff;
padding: 6px 14px;
}
Пример всплывающего окна с 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&autoplay=1">Текст кнопки</a>Результат: Текст кнопки
Пример кода Назад