Фрагмент кода всплывающего окна Exit Intent в JavaScript и jQuery
Один из проектов, над которым я работаю для этого сайта, — это всплывающий элемент div с 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();
});
});