Исечак искачућег кода намере за излаз у ЈаваСцрипт-у и јКуери-ју
Један од пројеката на којима радим за ову локацију је да имам искачући див са а ЦТА што подстиче нове посетиоце да пријави се на Martech Zone путем е-поште. Радим на додатном развоју да бих могао видгетизе овај метод за WordPress и нека одељак намере излаза буде стварна бочна трака... али желео сам да поделим јКуери функцију и пример исечка кода који помаже другима да креирају излазна намера догађај.
Шта је намера излаза?
Намера изласка је техника коју веб-сајтови користе за праћење кретања миша корисника и откривање када ће корисник напустити страницу. Када веб локација открије да корисник одлази, може да покрене искачући прозор или другу врсту поруке како би покушала да задржи корисника на страници или да га подстакне да се врати касније.
Излаз из технологије намере користи ЈаваСцрипт за праћење кретања миша и одређивање када ће корисник напустити страницу. Када веб локација открије да ће корисник напустити, може приказати искачућу поруку, понудити посебну понуду или пружити неку другу врсту подстицаја да подстакне корисника да остане на страници или се врати касније.
Веб локације за е-трговину често користе намеру изласка да би спречиле напуштање колица за куповину или да промовишемо посебне понуде и попусте за купце који ће напустити сајт. Такође га могу користити веб локације са садржајем за промоцију пријава за билтен или за подстицање корисника да прате сајт на друштвеним медијима.
ЈаваСцрипт-ова функција моуселеаве
Да бисмо разумели како mouseleave
функционише, корисно је знати како се уопште обрађују догађаји миша. Када пређете мишем преко веб странице, претраживач покреће низ догађаја, који се могу ухватити и њима управљати помоћу ЈаваСцрипт кода. Ови догађаји укључују mousemove
, mouseover
, mouseout
, mouseenter
, и mouseleave
.
mouseenter
mouseleave
догађаји су слични mouseover
mouseout
догађаја, али се понашају мало другачије. Док mouseover
mouseout
активирају се када миш уђе или напусти елемент, односно, такође се активирају када миш уђе или напусти било који подређени елемент унутар тог елемента. Ово може довести до неочекиваног понашања при раду са комплексом ХТМЛ- структуре.
mouseenter
mouseleave
догађаји се, с друге стране, покрећу само када миш уђе или напусти елемент за који је догађај повезан, и не покрећу се када миш уђе или напусти било који подређени елемент. То их чини предвидљивијим и лакшим за рад у многим случајевима.
mouseleave
догађај подржава већина модерних претраживача, укључујући Цхроме, Фирефок, Сафари и Едге. Међутим, можда га не подржавају неки старији прегледачи, као што је Интернет Екплорер 8 и старији.
Исечак кода намере за излаз из ЈаваСцрипт-а
Док mouseleave
изгледа да ради на датом див, можете га применити и на целу веб страницу.
Код креира нови div
елемент тзв overlay
која покрива целу страницу и има полупровидну црну позадину (прозирност од 80%). Ово преклапање додајемо на страницу заједно са искачућим прозором див.
Када корисник покрене намеру излаза померањем миша ван странице, приказујемо искачући прозор и преклапање. Ово спречава корисника да кликне било где на страници док је искачући прозор видљив.
Када корисник кликне ван искачућег прозора или на дугме за затварање, сакривамо и искачући прозор и преклапање да бисмо вратили нормалну функционалност странице.
document.addEventListener('DOMContentLoaded', function() {
// Create a div element with the desired dimensions and styling
var popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.backgroundColor = '#fff';
popup.style.border = '1px solid #ccc';
popup.style.width = '1200px';
popup.style.height = '630px';
popup.style.padding = '20px';
// Create a close button element with the desired styling
var closeButton = document.createElement('span');
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '10px';
closeButton.style.fontSize = '24px';
closeButton.style.cursor = 'pointer';
closeButton.innerHTML = '×';
// Add the close button to the popup div
popup.appendChild(closeButton);
// Create an overlay div with the desired styling
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
overlay.style.zIndex = '999';
// Add the overlay and popup to the page
document.body.appendChild(overlay);
document.body.appendChild(popup);
// Hide the popup and overlay initially
popup.style.display = 'none';
overlay.style.display = 'none';
// Show the popup and overlay when the user tries to leave the page
document.addEventListener('mouseleave', function(e) {
if (e.clientY < 0) {
popup.style.display = 'block';
overlay.style.display = 'block';
}
});
// Hide the popup and overlay when the user clicks outside of it
document.addEventListener('click', function(e) {
if (!popup.contains(e.target)) {
popup.style.display = 'none';
overlay.style.display = 'none';
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.addEventListener('click', function() {
popup.style.display = 'none';
overlay.style.display = 'none';
});
});
За максималну компатибилност претраживача, ипак бих препоручио да користите јКуери за имплементацију овога.
јКуери излазни исјечак кода
Ево исечка јКуери кода, који је далеко компатибилнији са свим претраживачима (све док укључите јКуери на своју страницу).
jQuery(document).ready(function() {
// Create a div element with the desired dimensions and styling
var popup = jQuery('<div></div>').css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)',
'background-color': '#fff',
'border': '1px solid #ccc',
'width': '1200px',
'height': '630px',
'padding': '20px'
});
// Create a close button element with the desired styling
var closeButton = jQuery('<span></span>').css({
'position': 'absolute',
'top': '10px',
'right': '10px',
'font-size': '24px',
'cursor': 'pointer'
}).html('×');
// Add the close button to the popup div
popup.append(closeButton);
// Create an overlay div with the desired styling
var overlay = jQuery('<div></div>').css({
'position': 'fixed',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'background-color': 'rgba(0, 0, 0, 0.8)',
'z-index': '999'
});
// Add the overlay and popup to the page
jQuery('body').append(overlay, popup);
// Hide the popup and overlay initially
popup.hide();
overlay.hide();
// Show the popup and overlay when the user tries to leave the page
jQuery(document).on('mouseleave', function(e) {
if (e.clientY < 0) {
popup.show();
overlay.show();
}
});
// Hide the popup and overlay when the user clicks outside of it
jQuery(document).on('click', function(e) {
if (!jQuery(e.target).closest(popup).length) {
popup.hide();
overlay.hide();
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.on('click', function() {
popup.hide();
overlay.hide();
});
});