JavaScript 和 jQuery 中的退出意圖彈出代碼片段
我正在為這個網站做的項目之一是有一個帶有 CTA 鼓勵新訪客 訂閱 Martech Zone 通過電子郵件。 我正在進行額外的開發,以便我可以 小部件化 這種方法用於 WordPress 並讓退出意圖部分成為一個實際的側邊欄……但我確實想分享 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。 但是,某些較舊的瀏覽器可能不支持它,例如 Internet Explorer 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();
});
});