JavaScript आणि jQuery मध्ये इंटेंट पॉपअप कोड स्निपेटमधून बाहेर पडा
मी या साइटसाठी काम करत असलेल्या प्रकल्पांपैकी एक पॉपअप डिव्ह आहे CTA जे नवीन अभ्यागतांना प्रोत्साहन देते सदस्यता घ्या Martech Zone ईमेलद्वारे. तेथे अतिरिक्त विकास आहे ज्यावर मी काम करत आहे जेणेकरून मी करू शकेन विजेट करणे साठी ही पद्धत वर्डप्रेस आणि एक्झिट इंटेंट विभाग हा एक वास्तविक साइडबार असावा… पण मला jQuery फंक्शन आणि उदाहरण कोड स्निपेट सामायिक करायचे होते जे इतरांना तयार करण्यात मदत करते. निर्गमन हेतू कार्यक्रम
बाहेर पडण्याचा हेतू काय आहे?
एक्झिट इंटेंट हे वापरकर्त्याच्या माउसच्या हालचालीचा मागोवा घेण्यासाठी आणि वापरकर्ता पेज कधी सोडणार आहे हे शोधण्यासाठी वेबसाइट्सद्वारे वापरले जाणारे तंत्र आहे. जेव्हा वेबसाइटला वापरकर्ता सोडत असल्याचे आढळून येते, तेव्हा ती वापरकर्त्याला पृष्ठावर ठेवण्याचा प्रयत्न करण्यासाठी किंवा नंतर परत येण्यास प्रवृत्त करण्यासाठी पॉपअप किंवा अन्य प्रकारचा संदेश ट्रिगर करू शकते.
हेतू तंत्रज्ञानातून बाहेर पडा माऊसच्या हालचालींचा मागोवा घेण्यासाठी आणि वापरकर्ता एखादे पृष्ठ कधी सोडणार आहे हे निर्धारित करण्यासाठी JavaScript वापरतो. जेव्हा वेबसाइटला असे आढळते की वापरकर्ता निघणार आहे, तेव्हा ती एक पॉपअप संदेश प्रदर्शित करू शकते, विशेष डील देऊ शकते किंवा वापरकर्त्याला पृष्ठावर राहण्यासाठी किंवा नंतर परत येण्यास प्रोत्साहित करण्यासाठी काही अन्य प्रकारचे प्रोत्साहन देऊ शकते.
प्रतिबंध करण्याचा प्रयत्न करण्यासाठी ई-कॉमर्स वेबसाइट्सद्वारे बाहेर पडण्याचा हेतू सहसा वापरला जातो शॉपिंग कार्ट परोपकार किंवा साइट सोडणार असलेल्या ग्राहकांना विशेष सौदे आणि सवलतींचा प्रचार करण्यासाठी. वृत्तपत्र साइनअपचा प्रचार करण्यासाठी किंवा वापरकर्त्यांना सोशल मीडियावर साइटचे अनुसरण करण्यास प्रोत्साहित करण्यासाठी सामग्री वेबसाइटद्वारे देखील याचा वापर केला जाऊ शकतो.
JavaScript चे mouseleave फंक्शन
कसे समजून घेण्यासाठी mouseleave
कार्य करते, सर्वसाधारणपणे माउस इव्हेंट कसे हाताळले जातात हे जाणून घेणे उपयुक्त आहे. जेव्हा तुम्ही तुमचा माऊस वेब पेजवर हलवता, तेव्हा ब्राउझरद्वारे इव्हेंटची मालिका ट्रिगर केली जाते, ज्या JavaScript कोडद्वारे कॅप्चर आणि हाताळल्या जाऊ शकतात. या घटनांचा समावेश आहे mousemove
, mouseover
, mouseout
, mouseenter
आणि mouseleave
.
अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना mouseenter
आणि mouseleave
घटना सारख्याच आहेत mouseover
आणि mouseout
घटना, पण ते थोडे वेगळे वागतात. असताना mouseover
आणि mouseout
जेव्हा माउस एखादे घटक प्रवेश करतो किंवा सोडतो तेव्हा ट्रिगर करतो, जेव्हा माउस त्या घटकामध्ये प्रवेश करतो किंवा सोडतो तेव्हा ते देखील ट्रिगर करतात. कॉम्प्लेक्ससह काम करताना यामुळे अनपेक्षित वर्तन होऊ शकते HTML संरचना.
mouseenter
आणि mouseleave
इव्हेंट्स, दुसरीकडे, जेव्हा इव्हेंट संलग्न आहे त्या घटकामध्ये माउस प्रवेश करतो किंवा सोडतो तेव्हाच ट्रिगर होतो आणि जेव्हा माउस कोणत्याही लहान घटकांमध्ये प्रवेश करतो किंवा सोडतो तेव्हा ट्रिगर करू नका. हे त्यांना अधिक अंदाज करण्यायोग्य आणि बर्याच प्रकरणांमध्ये कार्य करणे सोपे करते.
अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना mouseleave
इव्हेंटला Chrome, Firefox, Safari आणि Edge यासह बर्याच आधुनिक ब्राउझरद्वारे समर्थित आहे. तथापि, हे इंटरनेट एक्सप्लोरर 8 आणि पूर्वीच्या काही जुन्या ब्राउझरद्वारे समर्थित असू शकत नाही.
JavaScript एक्झिट इंटेंट कोड स्निपेट
तर 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 कोड स्निपेट आहे, जो सर्व ब्राउझरशी अधिक सुसंगत आहे (जोपर्यंत तुम्ही तुमच्या पेजमध्ये 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('×');
// 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();
});
});