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