Maudhui ya masokoUuzaji wa Barua pepe & Uendeshaji

Ondoka Kijisehemu cha Msimbo wa Kusudi wa Ibukizi katika JavaScript Na jQuery

Mojawapo ya miradi ambayo ninafanyia kazi tovuti hii ni kuwa na div ibukizi na a CTA ambayo inawahimiza wageni wapya jiandikishe Martech Zone kwa barua pepe. Kuna maendeleo ya ziada ninayofanyia kazi ili niweze wijeti njia hii kwa WordPress na kuwa na sehemu ya dhamira ya kutoka iwe upau halisi wa kando... lakini nilitaka kushiriki kazi ya jQuery na kijisehemu cha msimbo cha mfano ambacho husaidia wengine kuunda dhamira ya kutoka tukio hilo.

Nia ya Kuondoka ni nini?

Nia ya kutoka ni mbinu inayotumiwa na tovuti kufuatilia mienendo ya panya ya mtumiaji na kugundua wakati mtumiaji anakaribia kuondoka kwenye ukurasa. Tovuti inapogundua kuwa mtumiaji anaondoka, inaweza kuanzisha dirisha ibukizi au aina nyingine ya ujumbe ili kujaribu kumweka mtumiaji kwenye ukurasa au kuwashawishi kurejea baadaye.

Ondoka kwa teknolojia ya nia hutumia JavaScript kufuatilia mienendo ya kipanya na kubaini wakati mtumiaji anakaribia kuacha ukurasa. Tovuti inapogundua kuwa mtumiaji anakaribia kuondoka, inaweza kuonyesha ujumbe ibukizi, kutoa ofa maalum, au kutoa aina nyingine ya motisha ili kuhimiza mtumiaji kusalia kwenye ukurasa au kurejea baadaye.

Nia ya kuondoka mara nyingi hutumiwa na tovuti za e-commerce kujaribu kuzuia kutelekezwa kwa gari la ununuzi au kukuza mikataba maalum na punguzo kwa wateja ambao wanakaribia kuondoka kwenye tovuti. Inaweza pia kutumiwa na tovuti za maudhui kukuza usajili wa jarida au kuhimiza watumiaji kufuata tovuti kwenye mitandao ya kijamii.

Kitendaji cha kuondoka kwa kipanya cha JavaScript

Ili kuelewa jinsi mouseleave inafanya kazi, ni muhimu kujua jinsi matukio ya panya yanashughulikiwa kwa ujumla. Unaposogeza kipanya chako kwenye ukurasa wa wavuti, mfululizo wa matukio huanzishwa na kivinjari, ambacho kinaweza kunaswa na kushughulikiwa na msimbo wa JavaScript. Matukio haya ni pamoja na mousemove, mouseover, mouseout, mouseenter, na mouseleave.

The mouseenter na mouseleave matukio ni sawa na mouseover na mouseout matukio, lakini wanatenda tofauti kidogo. Wakati mouseover na mouseout trigger wakati kipanya inapoingia au kuondoka kipengele, kwa mtiririko huo, wao pia kuchochea wakati kipanya inapoingia au kuacha vipengele yoyote mtoto ndani ya kipengele hicho. Hii inaweza kusababisha tabia isiyotarajiwa wakati wa kufanya kazi na ngumu HTML miundo.

mouseenter na mouseleave matukio, kwa upande mwingine, husababisha tu wakati panya inapoingia au kuacha kipengele ambacho tukio limeshikamana, na usifanye wakati panya inapoingia au kuacha vipengele vya mtoto. Hii inawafanya kutabirika zaidi na rahisi kufanya kazi nao katika hali nyingi.

The mouseleave tukio linaauniwa na vivinjari vingi vya kisasa, ikiwa ni pamoja na Chrome, Firefox, Safari, na Edge. Hata hivyo, huenda isiauniwe na baadhi ya vivinjari vya zamani, kama vile Internet Explorer 8 na ya awali.

Kijisehemu cha Msimbo wa Kusudi wa Toka kwenye JavaScript

Wakati mouseleave inaonekana kufanya kazi kwenye div fulani, unaweza pia kuitumia kwa ukurasa mzima wa wavuti.

Msimbo huunda mpya div kipengele kinachoitwa overlay ambayo inashughulikia ukurasa mzima na ina mandharinyuma meusi yenye uwazi nusu (asilimia 80 ya uwazi). Tunaongeza nyongeza hii kwa ukurasa pamoja na dirisha ibukizi div.

Mtumiaji anapoanzisha dhamira ya kutoka kwa kusogeza kipanya chake nje ya ukurasa, tunaonyesha ibukizi na wekeleo. Hii inamzuia mtumiaji kubofya mahali pengine popote kwenye ukurasa wakati dirisha ibukizi linaonekana.

Mtumiaji anapobofya nje ya dirisha ibukizi au kwenye kitufe cha kufunga, tunaficha ibukizi na wekeleo ili kurejesha utendakazi wa kawaida kwenye ukurasa.

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

Kwa utangamano wa juu wa kivinjari, ningependekeza kutumia jQuery kutekeleza hii badala yake.

Kijisehemu cha Msimbo wa Kusudi wa jQuery

Hapa kuna kijisehemu cha msimbo wa jQuery, ambacho kinaendana zaidi na vivinjari vyote (mradi tu unajumuisha jQuery kwenye ukurasa wako).

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 ni CMO ya Fungua MAELEZO na mwanzilishi wa Martech Zone. Douglas amesaidia kampuni nyingi za kuanzisha MarTech zilizofaulu, amesaidia katika bidii inayofaa ya zaidi ya $5 bil katika ununuzi na uwekezaji wa Martech, na anaendelea kusaidia kampuni katika kutekeleza na kuelekeza mikakati yao ya uuzaji na uuzaji kiotomatiki. Douglas ni mtaalamu wa mabadiliko ya kidijitali anayetambulika kimataifa na mtaalam wa MarTech na spika. Douglas pia ni mwandishi aliyechapishwa wa mwongozo wa Dummie na kitabu cha uongozi wa biashara.

Related Articles

Rudi kwenye kifungo cha juu
karibu

Adblock Imegunduliwa

Martech Zone inaweza kukupa maudhui haya bila gharama kwa sababu tunachuma mapato ya tovuti yetu kupitia mapato ya matangazo, viungo vya washirika na ufadhili. Tutashukuru ikiwa ungeondoa kizuizi chako cha matangazo unapotazama tovuti yetu.