Фрагмент коду спливаючого вікна наміру вийти в JavaScript і jQuery
Одним із проектів, над яким я працюю для цього сайту, є спливаюче вікно div з a CTA що заохочує нових відвідувачів передплатити Martech Zone електронною поштою. Є додатковий розвиток, над яким я працюю, щоб я міг віджетувати цей метод для WordPress і зробити розділ намірів виходу справжньою бічною панеллю… але я хотів поділитися функцією jQuery та прикладом фрагмента коду, який допомагає іншим створювати вихід із наміру події.
Що таке намір виходу?
Намір вийти – це техніка, яка використовується веб-сайтами для відстеження руху миші користувача та визначення моменту, коли користувач збирається залишити сторінку. Коли веб-сайт виявляє, що користувач виходить, він може викликати спливаюче вікно або повідомлення іншого типу, щоб спробувати утримати користувача на сторінці або спонукати його повернутися пізніше.
Технологія намірів виходу використовує JavaScript для відстеження рухів миші та визначення моменту, коли користувач збирається залишити сторінку. Коли веб-сайт виявляє, що користувач збирається залишити сторінку, він може відобразити спливаюче повідомлення, запропонувати спеціальну пропозицію або надати інший тип стимулу, щоб заохотити користувача залишитися на сторінці або повернутися пізніше.
Намір виходу часто використовується веб-сайтами електронної комерції, щоб спробувати запобігти відмова від кошика для покупок або рекламувати спеціальні пропозиції та знижки для клієнтів, які збираються залишити сайт. Він також може використовуватися контент-сайтами для просування підписок на інформаційні бюлетені або заохочення користувачів стежити за сайтом у соціальних мережах.
Функція mouseleave JavaScript
Щоб зрозуміти як 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();
});
});