منځپانګه بازارد بریښنالیک بازار موندنه او اتومات کول

په جاواسکریپټ او jQuery کې د ارادې پاپ اپ کوډ سنیپټ څخه وتل

یو له هغو پروژو څخه چې زه یې د دې سایټ لپاره کار کوم د پاپ اپ ډیوی سره د a CTA چې نوي لیدونکي هڅوي ګډون وکړئ Martech Zone د بریښنالیک له لارې. دلته اضافي پرمختګ شتون لري چې زه یې کار کوم ترڅو زه یې کولی شم widgetize لپاره دا طریقه WordPress او د وتلو ارادې برخه یو ریښتیني سائډبار وي… مګر ما غوښتل د jQuery فنکشن او د مثال کوډ snippet شریک کړم چې د نورو سره مرسته کوي چې د جوړولو لپاره د وتلو نیت پېښه.

د وتلو اراده څه ده؟

د وتلو اراده یو تخنیک دی چې د ویب پاڼې لخوا کارول کیږي ترڅو د کاروونکي موږک حرکت تعقیب کړي او معلومه کړي کله چې کاروونکي پاڼه پریږدي. کله چې ویب پاڼه معلومه کړي چې کاروونکي پریږدي، دا کولی شي یو پاپ اپ یا بل ډول پیغام رامینځته کړي ترڅو هڅه وکړي چې کاروونکي په پاڼه کې وساتي یا وروسته بیرته راستانه شي.

د ارادې ټیکنالوژۍ څخه وتل جاواسکریپټ د موږک حرکتونو تعقیبولو لپاره کاروي او معلومه کړي چې کله یو کارن یو پاڼه پریږدي. کله چې ویب پاڼه معلومه کړي چې کاروونکي د وتلو په حال کې دي، دا کولی شي یو پاپ اپ پیغام ښکاره کړي، یو ځانګړي معامله وړاندې کړي، یا یو بل ډول هڅونه چمتو کړي ترڅو کاروونکي وهڅوي چې په پاڼه کې پاتې شي یا وروسته بیرته راستانه شي.

د وتلو اراده اکثرا د ای کامرس ویب پاڼو لخوا کارول کیږي ترڅو د مخنیوي هڅه وکړي د پیرود ګاډي پریښودل یا د پیرودونکو لپاره ځانګړي معاملې او تخفیف ته وده ورکول څوک چې سایټ پریږدي. دا د منځپانګې ویب پاڼې لخوا هم کارول کیدی شي د نیوز لیټر لاسلیکونو ته وده ورکړي یا کاروونکي وهڅوي چې سایټ په ټولنیزو رسنیو کې تعقیب کړي.

د JavaScript د mouseleave فعالیت

د دې لپاره چې پوه شي چې څنګه mouseleave کار کوي، دا ګټوره ده چې پوه شئ چې څنګه د موږک پیښې په عمومي توګه اداره کیږي. کله چې تاسو خپل ماوس په ویب پاڼه کې حرکت کوئ، د براوزر لخوا د پیښو لړۍ پیل کیږي، کوم چې د جاواسکریپټ کوډ لخوا نیول کیدی شي او اداره کیدی شي. په دغو پیښو کې شامل دي mousemove, mouseover, mouseout, mouseenter، او mouseleave.

د mouseenter او mouseleave پیښې سره ورته دي mouseover او mouseout پیښې، مګر دوی یو څه توپیر لري. په داسې حال کې mouseover او mouseout محرک کله چې موږک یو عنصر ته ننوځي یا پریږدي، په ترتیب سره، دوی هغه وخت هم محرک کوي کله چې موږک په هغه عنصر کې د ماشوم عناصرو ته ننوځي یا پریږدي. دا کولی شي غیر متوقع چلند رامینځته کړي کله چې د پیچلي سره کار کوي د HTML جوړښتونه.

mouseenter او mouseleave پیښې، له بلې خوا، یوازې هغه وخت محرک کوي کله چې موږک هغه عنصر ته ننوځي یا پریږدي چې پیښه ورسره تړلې وي، او کله چې موږک د ماشوم عناصرو ته ننوځي یا پریږدي نو محرک مه کوئ. دا دوی په ډیری قضیو کې د کار کولو لپاره ډیر وړاندوینې وړ او اسانه کوي.

د mouseleave پیښه د ډیری عصري براوزرونو لخوا ملاتړ کیږي ، پشمول د کروم ، فایرفاکس ، سفاري او ایج. په هرصورت، دا ممکن د ځینو پخوانیو براوزرونو لخوا ملاتړ نه وي، لکه د انټرنیټ اکسپلورر 8 او پخوانی.

د جاوا سکریپټ د وتلو ارادې کوډ ټوټه

په داسې حال کې mouseleave داسې ښکاري چې په ورکړل شوي div کې کار کوي، تاسو کولی شئ دا په ټوله ویب پاڼه کې هم پلي کړئ.

کوډ یو نوی رامینځته کوي div عنصر بلل کیږي overlay چې ټوله پاڼه پوښي او یو نیم شفاف تور پس منظر لري (80٪ شفافیت). موږ دا پوښښ ته اضافه کوو د پاپ اپ سره پاڼه Div

کله چې کارونکي د پاڼي څخه بهر خپل موږک حرکت کولو سره د وتلو اراده رامینځته کوي، موږ دواړه پاپ اپ او پوښښ ښکاره کوو. دا کارونکي د پاڼې په بل هر ځای کې د کلیک کولو مخه نیسي پداسې حال کې چې پاپ اپ لیدل کیږي.

کله چې کاروونکي د پاپ اپ څخه بهر یا د نږدې تڼۍ باندې کلیک کوي، موږ دواړه پاپ اپ او پوښښ پټوو ترڅو پاڼې ته نورمال فعالیت بیرته راولي.

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. ډګلاس د لسګونو بریالي مارټیک پیلونو سره مرسته کړې ، د مارټیک استملاک او پانګوونې کې د 5 ملیارد ډالرو څخه ډیر په پام کې نیولو کې مرسته کړې ، او د دوی د پلور او بازار موندنې ستراتیژیو پلي کولو او اتومات کولو کې شرکتونو سره مرستې ته دوام ورکوي. ډګلاس په نړیواله کچه پیژندل شوی ډیجیټل بدلون او د مار ټیک ماهر او سپیکر دی. ډګلاس د ډمي لارښود او د سوداګرۍ مشرتابه کتاب یو خپور شوی لیکوال هم دی.

اړونده بیشتر

بېرته پورته تڼۍ ته
نژدې

اډ بلاک کشف شو

Martech Zone د دې وړتیا لري چې تاسو ته دا مینځپانګه په هیڅ لګښت چمتو کړي ځکه چې موږ د اعلاناتو عاید ، وابسته لینکونو ، او سپانسرشپونو له لارې زموږ سایټ منیټ کوو. موږ به ستاینه وکړو که تاسو زموږ د سایټ لیدو سره سم خپل د اعلاناتو بلاکر لرې کړئ.