Ábhar MargaíochtaMargaíocht Ríomhphoist & Uathoibriú

Mír Chóid aníos Intinn Scoir i JavaScript Agus jQuery

Ar cheann de na tionscadail a bhfuilim ag obair air don suíomh seo tá div aníos le a CTA a spreagann cuairteoirí nua chun liostáil le Martech Zone trí ríomhphost. Tá forbairt bhreise ar a bhfuilim ag obair ionas gur féidir liom ghiuirléid an modh seo le haghaidh WordPress agus bíodh an rannán rún scoir mar bharra taoibh iarbhír… ach bhí fonn orm an fheidhm jQuery agus an mhír chóid shampla a roinnt a chuidíonn le daoine eile rún imeachta imeacht.

Cad is Intinn Scoir?

Teicníc is ea rún scoir a úsáideann láithreáin ghréasáin chun gluaiseacht luiche úsáideora a rianú agus a bhrath nuair atá an t-úsáideoir ar tí an leathanach a fhágáil. Nuair a bhraitheann an suíomh Gréasáin go bhfuil an t-úsáideoir ag fágáil, féadfaidh sé preabfhuinneog nó teachtaireacht de chineál eile a spreagadh chun iarracht a dhéanamh an t-úsáideoir a choinneáil ar an leathanach nó iad a mhealladh chun filleadh ar ais níos déanaí.

Teicneolaíocht rún scoir úsáideann JavaScript chun gluaiseachtaí luiche a rianú agus a chinneadh nuair atá úsáideoir ar tí leathanach a fhágáil. Nuair a bhraitheann an láithreán gréasáin go bhfuil an t-úsáideoir ar tí imeacht, féadfaidh sé teachtaireacht aníos a thaispeáint, beart speisialta a thairiscint, nó dreasacht de chineál éigin eile a sholáthar chun an t-úsáideoir a spreagadh chun fanacht ar an leathanach nó filleadh ar ais níos déanaí.

Is minic a úsáideann suíomhanna gréasáin ríomhthráchtála rún scoir chun iarracht a dhéanamh cosc tréigean cart siopadóireachta nó margaí speisialta agus lascainí a chur chun cinn do chustaiméirí atá ar tí imeacht ón suíomh. Is féidir le láithreáin ghréasáin ábhair é a úsáid freisin chun clárú nuachtlitreach a chur chun cinn nó chun úsáideoirí a spreagadh chun an suíomh a leanúint ar na meáin shóisialta.

Feidhm luchóg na luiche JavaScript

D'fhonn a thuiscint conas mouseleave oibreacha, tá sé ina chuidiú fios a bheith agat conas a láimhseáiltear imeachtaí luch i gcoitinne. Nuair a bhogann tú do luch thar leathanach gréasáin, spreagtar sraith imeachtaí ag an mbrabhsálaí, ar féidir iad a ghabháil agus a láimhseáil le cód JavaScript. Áirítear ar na himeachtaí seo mousemove, mouseover, mouseout, mouseenter, agus mouseleave.

An mouseenter agus mouseleave imeachtaí cosúil leis an mouseover agus mouseout imeachtaí, ach iad féin a iompar beagán difriúil. Cé go mouseover agus mouseout truicear nuair a théann an luch isteach nó a fhágann eilimint, faoi seach, spreagann siad freisin nuair a théann an luch isteach nó a fhágann aon eilimint leanbh laistigh den eilimint sin. Is féidir iompar gan choinne a bheith mar thoradh air seo agus tú ag obair le casta HTML struchtúir.

mouseenter agus mouseleave ar an láimh eile, ní spreagann imeachtaí ach amháin nuair a théann an luch isteach nó a fhágann an eilimint a bhfuil an t-imeacht ceangailte léi, agus ní spreagann siad nuair a thagann an luch isteach nó nuair a fhágann sé aon eilimintí linbh. Déanann sé seo iad níos intuartha agus níos éasca oibriú leo i go leor cásanna.

An mouseleave tacaítear leis an imeacht ón gcuid is mó de na brabhsálaithe nua-aimseartha, lena n-áirítear Chrome, Firefox, Safari, agus Edge. Mar sin féin, b’fhéidir nach dtacaíonn roinnt brabhsálaithe níos sine leis, mar Internet Explorer 8 agus níos luaithe.

Blúire Cód Intinn Scoir JavaScript

Cé go mouseleave cosúil go n-oibríonn sé ar div ar leith, is féidir leat é a chur i bhfeidhm ar leathanach gréasáin iomlán freisin.

Cruthaíonn an cód cód nua div eilimint ar a dtugtar overlay a chlúdaíonn an leathanach iomlán agus a bhfuil cúlra dubh leath-trédhearcach aige (teimhneacht 80%). Cuirimid an forleagan seo leis an leathanach in éineacht leis an bpíosa aníos div.

Nuair a spreagann an t-úsáideoir an rún scoir trína luch a bhogadh lasmuigh den leathanach, taispeánaimid an phreabfhuinneog agus an forleagan araon. Cuireann sé seo cosc ​​ar an úsáideoir cliceáil ar aon áit eile ar an leathanach agus an aníos le feiceáil.

Nuair a chliceálann an t-úsáideoir lasmuigh den phreabfhuinneog nó ar an gcnaipe dúnta, folaímid an phreabfhuinneog agus an forleagan chun gnáthfheidhmiúlacht a chur ar ais ar an leathanach.

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

Le haghaidh comhoiriúnacht uasta brabhsálaí, mholfainn jQuery a úsáid chun é seo a chur i bhfeidhm ina ionad sin, áfach.

jQuery Blúire Cód Intinn Scoir

Seo é an gearrthóg cód jQuery, atá i bhfad níos mó ag luí leis na brabhsálaithe go léir (chomh fada agus atá tú ag cur jQuery i do leathanach).

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 is CMO de OpenINSIGHTS agus bunaitheoir an Martech Zone. Chuidigh Douglas leis na dosaenacha de ghnólachtaí nuathionscanta MarTech ar éirigh leo, chuidigh sé le dícheall cuí os cionn $5 billiún in éadálacha agus infheistíochtaí Martech, agus leanann sé ag cabhrú le cuideachtaí a gcuid straitéisí díolacháin agus margaíochta a chur i bhfeidhm agus a uathoibriú. Is saineolaí agus cainteoir ar chlaochlú digiteach agus MarTech é Douglas atá aitheanta go hidirnáisiúnta. Is údar foilsithe é Douglas freisin ar threoirleabhar Dummie agus ar leabhar ceannaireachta gnó.

Airteagail gaolmhara

Ar ais go barr an cnaipe
Dún

Braitheadh ​​Adblock

Martech Zone in ann an t-ábhar seo a sholáthar duit gan aon chostas mar go ndéanaimid airgead ar ár suíomh trí ioncam fógraíochta, naisc chleamhnaithe agus urraíochtaí. Bheimis buíoch dá mbainfeá do bhacadóir fógraí agus tú ag féachaint ar ár suíomh.