Content MarketingEmail Marketing & Automation

Buda Chinangwa Popup Code Snippet muJavaScript Uye jQuery

Imwe yemapurojekiti andiri kushanda pairi saiti ino kuve nepopup div ine a CTA iyo inokurudzira vashanyi vatsva kuti Nyorera kune Martech Zone neemail. Pane imwe budiriro yandiri kushanda pairi kuti ndikwanise widgetize nzira iyi WordPress uye ita kuti chikamu chekubuda chive chepadivi ... asi ini ndaida kugovera iyo jQuery basa uye muenzaniso kodhi snippet inobatsira vamwe kugadzira kubuda chinangwa chiitiko.

Chii chinonzi Exit Intent?

Kubuda chinangwa inzira inoshandiswa nemawebhusaiti kuteedzera mafambiro emushandisi uye kuona kana mushandisi ave kuda kusiya peji. Kana webhusaiti yaona kuti mushandisi ari kuenda, inogona kuburitsa popup kana imwe mhando yemeseji kuedza kuchengeta mushandisi ari papeji kana kuvakwezva kuti vadzoke gare gare.

Buda tekinoroji yechinangwa inoshandisa JavaScript kuronda mafambiro embeva uye kuona kana mushandisi ave kuda kusiya peji. Kana iyo webhusaiti yaona kuti mushandisi ave kuda kuenda, inogona kuratidza popup meseji, kupa yakakosha dhiri, kana kupa imwe mhando yekukurudzira kukurudzira mushandisi kuti arambe ari papeji kana kudzoka gare gare.

Kubuda chinangwa chinowanzo shandiswa ne e-commerce mawebhusaiti kuyedza kudzivirira kusiya ngoro yekutengesa kana kusimudzira madhiri akakosha uye zvideredzwa kune vatengi vari kuda kusiya saiti. Inogona zvakare kushandiswa nemawebhusaiti emukati kukurudzira kusaina tsamba kana kukurudzira vashandisi kutevedzera saiti pasocial media.

JavaScript's mouseleave function

Kuti unzwisise sei mouseleave inoshanda, zvinobatsira kuziva kuti zviitiko zvembeva zvinobatwa sei mune zvese. Paunofambisa mbeva yako pamusoro pewebhu peji, nhevedzano yezviitiko zvinokonzereswa nebrowser, iyo inogona kutorwa uye kubatwa neJavaScript kodhi. Zviitiko izvi zvinosanganisira mousemove, mouseover, mouseout, mouseenter, uye mouseleave.

The mouseenter uye mouseleave zviitiko zvakafanana mouseover uye mouseout zviitiko, asi vanoita zvakasiyana zvishoma. Apo mouseover uye mouseout konzeresa kana mbeva ichipinda kana kusiya chinhu, zvichiteerana, zvinokonzeresa kana mbeva ichipinda kana kusiya chero zvinhu zvemwana mukati mechinhu ichocho. Izvi zvinogona kutungamirira kumaitiro asingatarisirwi kana uchishanda nematambudziko HTML zvivakwa.

mouseenter uye mouseleave zviitiko, kune rumwe rutivi, zvinongokonzeresa kana mbeva ichipinda kana kusiya chinhu icho chiitiko chakanamirwa, uye usaite kana mbeva ichipinda kana kusiya chero chinhu chemwana. Izvi zvinoita kuti zvive nyore kufanotaura uye zviri nyore kushanda nazvo muzviitiko zvakawanda.

The mouseleave chiitiko chinotsigirwa nemabhurawuza mazhinji emazuva ano, anosanganisira Chrome, Firefox, Safari, uye Edge. Nekudaro, inogona kunge isingatsigirwe nemamwe mabhurawuza echikuru, akadai seInternet Explorer 8 uye yapfuura.

JavaScript Exit Intent Code Snippet

apo mouseleave inoita seinoshanda pane yakapihwa div, unogona zvakare kuishandisa kune rese rewebhu peji.

Kodhi inogadzira itsva div element inonzi overlay iyo inovhara peji rese uye ine semi-pachena dema kumashure (80% opacity). Isu tinowedzera iyi yakafukidzira kune iyo peji pamwe chete nepopup div.

Kana mushandisi aburitsa chinangwa chekubuda nekufambisa mbeva yavo kunze kwepeji, isu tinoratidza zvese zviri zviviri popup uye pamusoro. Izvi zvinodzivirira mushandisi kudzvanya chero kupi zvako papeji asi popup ichionekwa.

Kana mushandisi adzvanya kunze kwepopup kana pabhatani rekuvhara, tinovanza zvese popup uye pamusoro pekuvhara kudzoreredza kuita kwakajairika kune peji.

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';
    });
});

Kuti ienderane nebrowser, ndingakurudzira kushandisa jQuery kuita izvi panzvimbo, zvakadaro.

jQuery Buda Chinangwa Code Snippet

Heino jQuery kodhi snippet, inowirirana zvakanyanya nemabhurawuza ese (chero uchisanganisira jQuery papeji rako).

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 ndiye CMO OpenINSIGHTS uye muvambi we Martech Zone. Douglas akabatsira akawanda ekubudirira kweMarTech kutanga, akabatsira mukushingairira kweanopfuura madhora mashanu emadhora mukutenga nekudyara kweMartech, uye anoenderera mberi nekubatsira makambani kuita nekuita otomatiki nzira dzawo dzekutengesa nekutengesa. Douglas inyanzvi inozivikanwa pasi rese yedhijitari uye MarTech nyanzvi uye mutauri. Douglas zvakare munyori akaburitswa wegwaro raDummie uye bhuku rehutungamiriri hwebhizinesi.

Related Articles

Kudzoka kumusoro
pedyo

Adblock Yaonekwa

Martech Zone inokwanisa kukupa izvi zvemukati pasina muripo nekuti isu tinoita mari saiti yedu kuburikidza nemari yekushambadza, affiliate links, uye kutsigira. Tinozotenda kana iwe ukabvisa yako ad blocker iwe paunoona yedu saiti.