مواد مارڪيٽنگاي ميل مارڪيٽنگ ۽ خودڪار

جاوا اسڪرپٽ ۽ jQuery ۾ انٽينٽ پاپ اپ ڪوڊ سنيپٽ مان نڪرڻ

هڪ پروجيڪٽ جنهن تي آئون هن سائيٽ لاءِ ڪم ڪري رهيو آهيان ان سان گڏ هڪ پاپ اپ ڊيو آهي سي ٽي جيڪو نئين سياحن کي حوصلا افزائي ڪري ٿو رڪنيت حاصل ڪرڻ Martech Zone اي ميل ذريعي. هتي اضافي ترقي آهي جنهن تي آئون ڪم ڪري رهيو آهيان ته جيئن آئون ڪري سگهان widgetize ڪرڻ هن طريقيڪار لاء WordPress ۽ ٻاهر نڪرڻ جي ارادي واري حصي کي اصل سائڊبار هجڻ گهرجي… پر مان jQuery فنڪشن ۽ مثال ڪوڊ اسنيپٽ کي حصيداري ڪرڻ چاهيان ٿو جيڪو ٻين کي ٺاهڻ ۾ مدد ڪري ٿو. نڪرڻ جو ارادو واقعي

نڪرڻ جو ارادو ڇا آهي؟

نڪرڻ جو ارادو هڪ ٽيڪنڪ آهي ويب سائيٽون استعمال ڪندڙ صارف جي مائوس جي حرڪت کي ٽريڪ ڪرڻ ۽ معلوم ڪرڻ لاءِ جڏهن صارف صفحي کي ڇڏڻ وارو آهي. جڏهن ويب سائيٽ کي معلوم ٿئي ٿو ته صارف ڇڏي رهيو آهي، اهو هڪ پاپ اپ يا ٻئي قسم جي پيغام کي ٽريڪ ڪري سگهي ٿو صارف کي صفحي تي رکڻ جي ڪوشش ڪرڻ يا بعد ۾ واپس موٽڻ لاء.

نڪرڻ جو ارادو ٽيڪنالاجي مائوس جي حرڪت کي ٽريڪ ڪرڻ لاءِ JavaScript استعمال ڪري ٿو ۽ اهو طئي ڪري ٿو ته جڏهن صارف هڪ صفحو ڇڏڻ وارو آهي. جڏهن ويب سائيٽ معلوم ڪري ٿي ته صارف ڇڏڻ وارو آهي، اهو هڪ پاپ اپ پيغام ڏيکاري سگهي ٿو، هڪ خاص ڊيل پيش ڪري سگهي ٿو، يا صارف کي صفحي تي رهڻ يا بعد ۾ واپس اچڻ جي حوصلا افزائي ڪرڻ لاء ڪجهه ٻين قسم جي ترغيب فراهم ڪري سگهي ٿي.

نڪرڻ جو ارادو اڪثر ڪري استعمال ڪيو ويندو آهي اي ڪامرس ويب سائيٽن کي روڪڻ جي ڪوشش ڪرڻ لاء شاپنگ ڪارٽ ڇڏڻ يا خاص ڊيلز ۽ رعايتن کي فروغ ڏيڻ لاءِ گراهڪن لاءِ جيڪي سائيٽ ڇڏڻ وارا آهن. اهو پڻ استعمال ڪري سگهجي ٿو مواد ويب سائيٽون نيوز ليٽر سائن اپ کي فروغ ڏيڻ لاءِ يا صارفين کي سوشل ميڊيا تي سائيٽ جي پيروي ڪرڻ جي حوصلا افزائي ڪرڻ لاءِ.

JavaScript جي مائوسليو فنڪشن

سمجھڻ لاء ڪيئن mouseleave ڪم ڪري ٿو، اهو ڄاڻڻ مددگار آهي ته عام طور تي مائوس جي واقعن کي ڪيئن سنڀاليو وڃي ٿو. جڏھن توھان پنھنجي ماؤس کي ھڪڙي ويب پيج تي ھلايو ٿا، واقعن جو ھڪڙو سلسلو برائوزر طرفان شروع ڪيو ويندو آھي، جيڪي جاوا اسڪرپٽ ڪوڊ پاران قبضو ۽ ھٿ ڪري سگھندا آھن. انهن واقعن ۾ شامل آهن mousemove, mouseover, mouseout, mouseenter، ۽ mouseleave.

هن mouseenter ۽ mouseleave واقعا ساڳيا آهن mouseover ۽ mouseout واقعا، پر اهي ٿورڙي مختلف طريقي سان عمل ڪن ٿا. جڏهن ته mouseover ۽ mouseout ٽرگر جڏهن ماؤس ڪنهن عنصر ۾ داخل ٿئي ٿو يا ڇڏي ٿو، ترتيب سان، اهي پڻ ٽرگر ڪندا آهن جڏهن ماؤس ان عنصر ۾ داخل ٿئي ٿو يا ڇڏي ٿو. اهو ٿي سگهي ٿو اڻڄاتل رويي جي ڪري جڏهن پيچيده سان ڪم ڪندي HTML بناوتون.

mouseenter ۽ mouseleave واقعا، ٻئي طرف، صرف ان وقت ٽرگر ڪندا آهن جڏهن ماؤس داخل ٿئي ٿو يا ان عنصر کي ڇڏي ٿو جنهن سان ايونٽ جڙيل آهي، ۽ ٽرگر نه ڪريو جڏهن ماؤس داخل ٿئي ٿو يا ڪنهن ٻار جي عنصر کي ڇڏي ٿو. اهو انهن کي وڌيڪ پيش گوئي ڪري ٿو ۽ ڪيترن ئي ڪيسن ۾ ڪم ڪرڻ آسان بڻائي ٿو.

هن mouseleave ايونٽ سڀ کان جديد برائوزرن جي مدد سان آهي، بشمول ڪروم، فائر فاکس، سفاري، ۽ ايج. بهرحال، اهو شايد ڪجهه پراڻن برائوزرن سان سهڪار نه ڪري سگھي، جهڙوڪ انٽرنيٽ ايڪسپلورر 8 ۽ اڳوڻو.

جاوا اسڪرپٽ نڪرڻ جو ارادو ڪوڊ جو ٽڪرو

جڏهن ته mouseleave هڪ ڏنل div تي ڪم ڪرڻ لڳي، توهان ان کي پوري ويب پيج تي پڻ لاڳو ڪري سگهو ٿا.

ڪوڊ نئون ٺاهي ٿو div عنصر سڏيو ويندو آهي overlay جيڪو سڄو صفحو ڍڪي ٿو ۽ هڪ نيم شفاف ڪارو پس منظر آهي (80٪ اوپيسيٽي). اسان هن اوورلي کي شامل ڪيو پاپ اپ سان گڏ صفحو حصا.

جڏهن صارف پنهنجي ماؤس کي صفحي جي ٻاهران منتقل ڪندي نڪرڻ واري ارادي کي متحرڪ ڪري ٿو، اسان پاپ اپ ۽ اوورلي ٻنهي کي ڏيکاريون ٿا. اهو صارف کي صفحي تي ڪٿي به ڪلڪ ڪرڻ کان روڪي ٿو جڏهن پاپ اپ نظر اچي رهيو آهي.

جڏهن صارف پاپ اپ کان ٻاهر يا بند بٽڻ تي ڪلڪ ڪري ٿو، اسان صفحي تي عام ڪارڪردگي بحال ڪرڻ لاءِ پاپ اپ ۽ اوورلي ٻنهي کي لڪائيندا آهيون.

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

وڌ ۾ وڌ برائوزر مطابقت لاءِ، مان jQuery استعمال ڪرڻ جي صلاح ڏيندس ان جي بدران، جيتوڻيڪ.

jQuery نڪرڻ جو ارادو ڪوڊ جو ٽڪرو

ھتي آھي jQuery ڪوڊ جو snippet، جيڪو سڀني برائوزرن سان تمام گھڻو مطابقت رکي ٿو (جيستائين توھان پنھنجي صفحي ۾ jQuery شامل ڪري رھيا آھيو).

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 جو CMO آهي OpenINSIGHTS ۽ جو باني Martech Zone. ڊگلس ڪيترن ئي ڪامياب MarTech startups جي مدد ڪئي آهي، مارٽيڪ حاصلات ۽ سيڙپڪاري ۾ 5 بلين ڊالر کان وڌيڪ جي محنت ۾ مدد ڪئي آهي، ۽ انهن جي سيلز ۽ مارڪيٽنگ جي حڪمت عملي کي لاڳو ڪرڻ ۽ خودڪار ڪرڻ ۾ ڪمپنين جي مدد ڪرڻ جاري آهي. ڊگلس هڪ بين الاقوامي طور تي تسليم ٿيل ڊجيٽل ٽرانسفارميشن ۽ مار ٽيڪ ماهر ۽ اسپيڪر آهي. ڊگلس هڪ ڊمي جي گائيڊ ۽ ڪاروباري قيادت جي ڪتاب جو شايع ٿيل ليکڪ پڻ آهي.

لاڳاپيل مقالات

مٿي تي ڪلڪ ڪري بٽڻ
بند

Adblock جو پتو لڳايو ويو

Martech Zone توهان کي هي مواد بغير ڪنهن قيمت تي مهيا ڪرڻ جي قابل آهي ڇو ته اسان اسان جي سائيٽ کي اشتهارن جي آمدني، الحاق لنڪس، ۽ اسپانسرشپ ذريعي رقم ڪريون ٿا. اسان جي تعريف ڪنداسين جيڪڏهن توهان پنهنجي اشتهار بلاڪ ڪندڙ کي هٽائي ڇڏيو جيئن توهان اسان جي سائيٽ کي ڏسو.