Irten Intent Popup Code Snippet JavaScript eta jQuery-n
Gune honetarako lantzen ari naizen proiektuetako bat popup div bat izatea da CTA horrek bisitari berriak animatzen ditu harpidetu Martech Zone posta elektronikoz. Lantzen ari naizen garapen gehigarria dago ahal izateko widgetize metodo hau WordPress eta irteera-asmoaren atala benetako alboko barra izan dadila... baina besteei bat sortzen laguntzen dien jQuery funtzioa eta adibideko kode zatia partekatu nahi nituen. irteera intentzioa Gertaera.
Zer da Irteera Asmoa?
Irteteko asmoa webguneek erabiltzailearen saguaren mugimendua jarraitzeko eta erabiltzailea orritik irtetekotan dagoen detektatzeko erabiltzen duten teknika da. Webguneak erabiltzailea irteten ari dela detektatzen duenean, popup bat edo beste mezu mota bat abiarazi dezake erabiltzailea orrialdean mantentzen saiatzeko edo geroago itzultzera erakartzeko.
Irteteko asmoa teknologia JavaScript erabiltzen du saguaren mugimenduak jarraitzeko eta erabiltzaile bat orri bat noiz irtetekotan dagoen zehazteko. Webguneak erabiltzailea irteteko zorian dagoela hautematen duenean, laster-mezu bat bistara dezake, eskaintza berezi bat eskaini edo beste pizgarri motaren bat eman dezake erabiltzailea orrialdean jarraitzera edo geroago itzultzera animatzeko.
Irteera-asmoa sarritan erabiltzen dute merkataritza elektronikoko webguneek prebenitzen saiatzeko erosketa saskiaren abandonua edo gunetik uztear dauden bezeroei eskaintza eta deskontu bereziak sustatzeko. Edukien webguneek buletinen izenak sustatzeko edo erabiltzaileak sare sozialetan webgunea jarraitzera bultzatzeko ere erabil dezakete.
JavaScript-en mouseleave funtzioa
Nola ulertzeko mouseleave
funtzionatzen du, lagungarria da saguaren gertaerak orokorrean nola kudeatzen diren jakitea. Sagua web-orri baten gainetik mugitzen duzunean, arakatzaileak gertaera batzuk abiarazten ditu, JavaScript kodearen bidez atzeman eta kudea ditzake. Ekitaldi horien artean daude mousemove
, mouseover
, mouseout
, mouseenter
, eta mouseleave
.
The mouseenter
mouseleave
gertaerak antzekoak dira mouseover
mouseout
gertaerak, baina portaera apur bat ezberdina dute. Bitartean mouseover
mouseout
sagua elementu batean sartzen edo irteten denean, hurrenez hurren, abiarazten dira, sagua elementu horren barruan edozein elementu seme-alaba sartzen edo irteten denean ere abiarazten dute. Horrek ustekabeko portaera ekar dezake konplexuekin lan egitean HTML egiturak.
mouseenter
mouseleave
gertaerak, berriz, sagua gertaera erantsita dagoen elementuan sartzen edo irteten denean soilik abiarazten dira, eta ez dira abiarazten sagua edozein elementu ume sartzen edo irteten denean. Horrek aurreikusgarriagoak eta errazagoak egiten ditu lan egiteko kasu askotan.
The mouseleave
gertaera arakatzaile moderno gehienek onartzen dute, besteak beste, Chrome, Firefox, Safari eta Edge. Hala ere, baliteke arakatzaile zahar batzuek ez izatea, hala nola, Internet Explorer 8 eta lehenagokoak.
JavaScript Irteteko asmoaren kodearen zatia
Bitartean mouseleave
div jakin batean funtzionatzen duela dirudi, web orri oso batean ere aplika dezakezu.
Kodeak berri bat sortzen du div
izeneko elementua overlay
orrialde osoa hartzen duena eta hondo beltz erdi gardena duena (%80ko opakutasuna). Gainjarri hau gehitzen diogu orrialdea pop-uparekin batera div.
Erabiltzaileak irteera-asmoa abiarazten duenean sagua orritik kanpo mugituz, popup-a eta gainjartzea erakusten dugu. Honek erabiltzaileak orrialdeko beste edozein tokitan klik egitea eragozten du popup-a ikusgai dagoen bitartean.
Erabiltzaileak pop-upetik kanpo edo ixteko botoian klik egiten duenean, popup-a eta gainjartzea ezkutatzen ditugu orrialdearen funtzionaltasun normala berreskuratzeko.
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';
});
});
Arakatzaileen bateragarritasun handiena lortzeko, hau ezartzeko jQuery erabiltzea gomendatuko nuke, ordea.
jQuery Irteteko asmoaren kodearen zatia
Hona hemen jQuery kode zatia, arakatzaile guztiekin bateragarriagoa dena (betiere jQuery zure orrian sartzen baduzu).
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();
});
});