линия

Главная

четверг, 26 января 2017 г.

Всплывающее уведомление при закрытии страницы

На днях, поступил пациент, с острой нуждой функционала - вывод  попап окна при закрытии страницы. Получив мотивационные денежные средства приступил к решению данной задачи. Отмечу, решений в сети предостаточно, но  меня по тем или иным причинам не устраивали. В конечном счете пришлось запилить это дело самому. Вооружившись полученными знаниями приступил к делу.  Полученный результат удивил даже меня самого, ибо все получилось настолько безболезненно и быстро, что я тут же сел писать данный пост.

Первый код

В сети есть вот такой пример:
 
$(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  .Но она срабатывает если уйти из рабочей области вниз или в бок. То ест надо тоже дорабатывать.











Комментариев нет:

Отправить комментарий