Drupal всплывающее окно при уходе с сайта

Аватар пользователя alex-litvinov alex-litvinov 14 ноября 2021 в 15:02

Добрый день не могли бы вы подсказать в чем у меня проблема в коде всплывающего окна?
Создается блок с HTML:

<div class="exitblock">
    <div class="fon"></div>    
    <div class="modaltext">    
        Текст, который по вашему мнению должен увидеть посетитель перед уходом.
    </div>
    <div class="closeblock">+</div>
</div>

Добавляем в таблицу стилей CSS:

.exitblock {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitblock .fon {
    background: #F6FCFF;
    opacity:.8;
    position:fixed;
    width:100%;
    height:100%;
}
.exitblock .modaltext {
    box-sizing: border-box;  
    padding:20px 40px;
    border: 2px solid #AEAEAE;
    background: #F6FCFF;
    position:fixed;
    top:80px;
    left:50%;
    margin-left:-30%;
    width:60%;
    box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}        
.closeblock {
    cursor:pointer;
    position: fixed;
    line-height:60px;
    font-size:82px;
    transform: rotate(45deg);
    text-align:center;
    top:20px;
    right:30px;
    color: #337AB7;    
}
.closeblock:hover {
    color: #000;    
}

JS с погрузкой библиотеки jQuery:

($(document).mouseleave(function(e){
    if (e.clientY < 10) {
        $(".exitblock").fadeIn("fast");
    }    
});
$(document).click(function(e) {
    if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
        $(".exitblock").remove();
    }
});)(jQuery);

Лучший ответ

Аватар пользователя ivan.petrovich ivan.petrovich 14 ноября 2021 в 17:34
(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {

      $(document).mouseleave(function (e) {
        if (e.clientY < 10) {
          $(".exitblock").fadeIn("fast");
        }
      });
      $(document).click(function (e) {
        if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
          $(".exitblock").remove();
        }
      });

    }
  };
}(jQuery));

Комментарии

Аватар пользователя ivnish ivnish 14 ноября 2021 в 15:07

Опишите лучше для начала алгоритм (словами) как это должно работать

Аватар пользователя alex-litvinov alex-litvinov 14 ноября 2021 в 15:55

Когда курсок мыши направляется на закрытие страницы, автоматически всплывает окно, где сплывает Опросник почему вы хотите покинуть страницу.

Аватар пользователя ivan.petrovich ivan.petrovich 14 ноября 2021 в 17:34
(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {

      $(document).mouseleave(function (e) {
        if (e.clientY < 10) {
          $(".exitblock").fadeIn("fast");
        }
      });
      $(document).click(function (e) {
        if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
          $(".exitblock").remove();
        }
      });

    }
  };
}(jQuery));