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