Sòti Entansyon Popup Kòd Frag nan JavaScript ak jQuery
Youn nan pwojè m ap travay sou sit sa a se gen yon div popup ak yon Kta ki ankouraje nouvo vizitè yo abònman nan Martech Zone pa imel. Gen plis devlopman m ap travay sou li pou m kapab widgetize metòd sa a pou WordPress epi fè seksyon entansyon sòti a se yon ba kote aktyèl... men mwen te vle pataje fonksyon jQuery a ak egzanp kòd fragment ki ede lòt moun yo kreye yon sòti entansyon evènman.
Ki sa ki Entansyon Sòti?
Entansyon sòti se yon teknik sit entènèt yo itilize pou swiv mouvman sourit yon itilizatè epi detekte lè itilizatè a pral kite paj la. Lè sit entènèt la detekte ke itilizatè a ap kite, li ka deklanche yon popup oswa lòt kalite mesaj pou eseye kenbe itilizatè a sou paj la oswa pouse yo retounen pita.
Sòti teknoloji entansyon sèvi ak JavaScript pou swiv mouvman sourit epi detèmine lè yon itilizatè pral kite yon paj. Lè sit entènèt la detekte ke itilizatè a pral kite, li ka montre yon mesaj popup, ofri yon kontra espesyal, oswa bay kèk lòt kalite ankourajman ankouraje itilizatè a rete sou paj la oswa retounen pita.
Entansyon sòti souvan itilize pa sit entènèt e-commerce pou eseye anpeche shopping cart abandon oswa pou ankouraje kontra espesyal ak rabè bay kliyan ki pral kite sit la. Sit wèb kontni kapab itilize li tou pou ankouraje enskripsyon nan bilten oswa pou ankouraje itilizatè yo swiv sit la sou medya sosyal.
Fonksyon sourit JavaScript a
Yo nan lòd yo konprann ki jan mouseleave
travay, li itil pou konnen ki jan evènman sourit yo jere an jeneral. Lè ou deplase sourit ou sou yon paj entènèt, yon seri evènman yo deklanche pa navigatè a, ki ka kaptire ak okipe pa kòd JavaScript. Evènman sa yo genyen ladan yo mousemove
, mouseover
, mouseout
, mouseenter
, epi mouseleave
.
Jounal mouseenter
ak mouseleave
evènman yo sanble ak la mouseover
ak mouseout
evènman yo, men yo konpòte yo yon ti kras diferan. Pandan ke mouseover
ak mouseout
deklanche lè sourit la antre oswa kite yon eleman, respektivman, yo tou deklanche lè sourit la antre oswa kite nenpòt eleman timoun nan eleman sa a. Sa a ka mennen nan konpòtman inatandi lè w ap travay ak konplèks HTML estrikti.
mouseenter
ak mouseleave
evènman yo, nan lòt men an, sèlman deklanche lè sourit la antre oswa kite eleman ki tache ak evènman an, epi yo pa deklanche lè sourit la antre oswa kite nenpòt eleman timoun. Sa fè yo pi previzib ak pi fasil pou travay avèk yo nan anpil ka.
Jounal mouseleave
evènman an sipòte pa pifò navigatè modèn, tankou Chrome, Firefox, Safari, ak Edge. Sepandan, li ka pa sipòte pa kèk navigatè ki pi gran, tankou Internet Explorer 8 ak pi bonè.
Eksit Kòd Entansyon JavaScript
Pandan ke mouseleave
parèt travay sou yon div bay, ou ka aplike li tou nan yon paj entènèt tout antye.
Kòd la kreye yon nouvo div
eleman ki rele overlay
ki kouvri tout paj la epi ki gen yon background nwa semi-transparan (80% opakite). Nou ajoute sa a kouvri nan paj ansanm ak popup la div.
Lè itilizatè a deklannche entansyon sòti nan deplase sourit yo deyò paj la, nou montre tou de popup la ak kouvri a. Sa a anpeche itilizatè a klike nenpòt lòt kote sou paj la pandan popup la vizib.
Lè itilizatè a klike deyò popup la oswa sou bouton fèmen, nou kache tou de popup la ak kouvri a pou retabli fonksyonalite nòmal nan paj la.
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';
});
});
Pou konpatibilite maksimòm navigatè, mwen ta rekòmande pou itilize jQuery aplike sa a olye de sa.
jQuery Eksit Entansyon Kòd Fragment
Men snippet kòd jQuery a, ki pi konpatib ak tout navigatè (osi lontan ke w ap enkli jQuery nan paj ou a).
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();
});
});