На днях, поступил пациент, с острой нуждой функционала - вывод попап окна при закрытии страницы. Получив мотивационные денежные средства приступил к решению данной задачи. Отмечу, решений в сети предостаточно, но меня по тем или иным причинам не устраивали. В конечном счете пришлось запилить это дело самому. Вооружившись полученными знаниями приступил к делу. Полученный результат удивил даже меня самого, ибо все получилось настолько безболезненно и быстро, что я тут же сел писать данный пост.Первый код
В сети есть вот такой пример:
$(document).ready(function() {
$(document).mousemove(function(e) {
if(e.pageY <= 5){
// Launch MODAL BOX
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
}
});
});
На первый взгляд все работает идеально. Но, позже был замечен глюк: окно появляется если курсор опускается сверху вниз. И если страница больше чем дисплей, и прокручен вниз данный метод не работает. Ибо, надо следить на pageY а clientY.Модифицируем
Толковый программист сразу скажет, надо следить за движением курсора: если сверху вниз то игнорируем, иначе true. Сказано - сделано.
$(document).ready(function() {
var mouseDirection = 0;
var mousePosY = 0;
var popup3showed = getCookie('popup3showed');
//popup3showed = true;
$(document).mousemove(function(e) {
if(popup3showed)return;
// console.log(e);
if(e.clientY < mousePosY){
mouseDirection=-1;
}else {
mouseDirection=1;
}
mousePosY = e.clientY;
if(e.clientY <= 15 && mouseDirection === -1){
mousePosY = 0;
popup3showed = true;
setCookie("popup3showed",popup3showed,"","/");
layerShow(".popup3");
//console.log(e.pageY);
}
//console.log(e.clientY);
});
});
Напоследок скажу что у JQuery есть замечательная функция mouseleave .Но она срабатывает если уйти из рабочей области вниз или в бок. То ест надо тоже дорабатывать.
Комментариев нет:
Отправить комментарий