Maketing KontniImèl Maketing & Otomatik

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('&times;');

    // 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();
    });
});

Douglas Karr

Douglas Karr se CMO nan OpenINSIGHTS ak fondatè a nan Martech Zone. Douglas te ede plizyè douzèn demaraj MarTech ki gen siksè, li te ede nan dilijans plis pase $5 milya nan akizisyon ak envestisman Martech, epi li kontinye ede konpayi yo nan mete ann aplikasyon ak otomatize estrateji lavant ak maketing yo. Douglas se yon transfòmasyon dijital entènasyonalman rekonèt ak ekspè MarTech ak oratè. Douglas se tou yon otè pibliye nan yon gid Dummie a ak yon liv lidèchip biznis.

Atik ki gen rapò

Retounen nan bouton tèt
Fèmen

Adblock Detekte

Martech Zone se kapab ba ou kontni sa a gratis paske nou monetize sit nou an atravè revni anons, lyen afilye, ak parennaj. Nou ta apresye si ou ta retire bloke anons ou a pandan w ap gade sit nou an.