Tylko administratorzy mogą wejść do centrum administracyjnego. Zaloguj się
Wyskakujące okienka
Wyskakujące okienko może zawierać tekst, zawartość bloku HTML, ładowanie iframe (youtube lub dane z innych witryn) lub dane ajax (dane ajax ze stron lub artykułów na Twojej stronie ).
Instrukcja:
Wyskakujące okienko zostanie wywołane za pomocą poniższego kodu.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="Okno wyskakujące" href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&autoplay=1">Tekst przycisku</a>W parametrach łącza można określić następujące parametry:
- data-iframe (typ danych do załadowania)
- 2 - Pełna ścieżka url w ramce (np. do przesłania na youtube)
- 3 - Identyfikator lub klasa ze strony (blok z ID lub klasą`należy najpierw utworzyć na stronie)
- 4 - Ramka z danymi strony "p" (do korzystania ze stron serwisu)(na przykład /ajax.php?p=ścieżka href)
- 5 - Ramka z danymi karty produktu "shop_cat_p" (na przykład /ajax.php?shop_cat_p=ścieżka href) gdzie możesz podać pełną ścieżkę do strony karty produktu
- 1 - Ramka z danymi strony katalogu artykułów, Przekaż zmienną GET "blog_cat_p" (na przykład /ajax.php?blog_cat_p=ścieżka href) w którym możesz podać pełną ścieżkę do artykułu
- 11 - Dane strony katalogu artykułów HTML, Przekaż zmienną GET "blog_cat_p" (na przykład /ajax.php?blog_cat_p=ścieżka href) w którym możesz podać pełną ścieżkę do artykułu
- 14 - Dane strony HTML "p" (do korzystania ze stron serwisu)(na przykład /ajax.php?p=ścieżka href)
- 15 - Dane karty produktu HTML "shop_cat_p" (na przykład /ajax.php?shop_cat_p=ścieżka href) gdzie możesz podać pełną ścieżkę do strony karty produktu
- data-width - szerokość okna
- data-height - wysokość okna
- data-auto-width - automatyczna szerokość okna (wartość wskazuje minimalną możliwą szerokość)
- data-auto-height - automatyczna wysokość okna (wartość wskazuje minimalną możliwą wysokość)
- (automatyczna szerokość i wysokość mają pierwszeństwo przed początkową szerokością i wysokością)
- data-max-width - maksymalna szerokość okna
- data-max-height - maksymalna wysokość okna
- data-mobile-width - szerokość okna mobilnego (jeśli okno jest mniejsze niż określony rozmiar, to jest ustawione na określoną szerokość)
- data-title - Tytuł okna
- href lub data-href - ścieżka do strony do otwarcia lub pobrania zmiennej
- data-close-button - tekst przycisku zamknięcia okna (wyświetlane tylko jeśli wartość jest określona)
- data-unset-height - Usuń styl wysokości zawartości okna (dodatkowy atrybut, który eliminuje ograniczenie wysokości bloku z zawartością wewnątrz okna) data-unset-height="1"
- data-header-fix - Popraw tytuł okna
- data-close-overlay - Włącz/Wyłącz zamykanie okna po kliknięciu poza jego obszarem (dodatkowy atrybut. Wartości: „1” (włącz), „0” (wyłącz)). Domyślnie - Włączone (jeśli nie określono).
data-micromodal-close - Atrybut do zamykania otwartego okna. Można go umieścić w dowolnym miejscu w treści ładowanej wewnątrz okna.
data-dialog-callback - Atrybut
data-dialog-callback pozwala określić nazwę funkcji, która zostanie wywołana po otwarciu okna popup.
Przykład
Code: html
<a href="#" class="hotengine-script-popup" data-dialog-callback="myCustomFunction">Otwórz</a>
<script>
function myCustomFunction() {
console.log("Callback został wykonany!");
}
</script>data-dialog-button-callback - Atrybut
data-dialog-button-callback pozwala określić funkcje callback dla przycisków w oknie popup. Format: NazwaPrzycisku:callbackFunctionBtn, kilka przycisków oddzielamy przecinkiem. Funkcje mogą być zdefiniowane zarówno przed otwarciem okna, jak i po — zostaną wywołane przy kliknięciu przycisku, jeśli funkcja istnieje.
Przykład
Code: html
<a href="#" class="hotengine-script-popup" data-dialog-button-callback="Ok:callbackFunctionBtn1">Otwórz</a>
<script>
window.callbackFunctionBtn1 = function() {
console.log("Kliknięto przycisk Ok");
};
</script>
Przykład stylu CSS, który umieszcza kilka przycisków w dolnej części okna popup z dodaną podkładką.
Przykład
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;
}Przykład wyskakującego okienka wideo z 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="Okno wyskakujące" href="https://www.youtube.com/embed/T9zuAxr1Wfg?rel=0&autoplay=1">Tekst przycisku</a>Wynik: Tekst przycisku
Przykład kodu Temu