Тільки користувачам дозволено входити в центр адміністрування. Вхід
Впливаючі вікна
Спливаюче вікно може містити текст, вміст 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("Натиснута кнопка Ok");
};
</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>Результат: Текст кнопки
Приклад коду Назад