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% 不透明度)。 我们将这个叠加层添加到 页面和弹出窗口 格。
当用户通过将鼠标移出页面来触发退出意图时,我们会同时显示弹出窗口和叠加层。 这可以防止用户在弹出窗口可见时单击页面上的任何其他位置。
当用户在弹出窗口外或关闭按钮上单击时,我们会隐藏弹出窗口和叠加层以恢复页面的正常功能。
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();
});
});