Не срабатывающий popstate и beforeunload

Question

Необходимо поставить скрипт камбекера, чтобы при нажатии на кнопку назад или закрыть окно, всплывало окошко с текстом по типу "Подождите! Для вас есть уникальное предложение - скидка 50%". Пример скрипта есть в данной статье: https://yellowweb.top/скрипт-comebacker/.

Я наверстал следующую страницу с использованием камбекера.

$(function() {
  $('.close-over, .close-undermodal').on('click', function() {
    $('#comebacker').fadeOut(300); // 300 скорость исчезновения | disappear speed
    $('body').removeClass('comebackerhidden');
  });

  var comebacker = true;

  /**
        $(window).mouseout(function(e){
            if(e.pageY - $(window).scrollTop() < 1 && comebacker == true){
                $('#comebacker').fadeIn(300); 
                $('body').addClass('comebackerhidden');
                comebacker = false;
            }
        });
    **/

  $(window).on('popstate', function(e) {
    e.preventDefault();
    if(comebacker==true) {
       $('#comebacker').fadeIn(300);
       $('body').addClass('comebackerhidden');
       comebacker = false;
    }
  });

  $(window).on('beforeunload', function(e) {
    e.preventDefault();
    if(comebacker==true) {
       $('#comebacker').fadeIn(300);
       $('body').addClass('comebackerhidden');
       comebacker = false;
    }
  });

  try {
    setTimeout(
      function show_comebacker() {
        $('#comebacker').fadeIn(300); // 300 скорость появления | appear speed 
        $('body').addClass('comebackerhidden');
      }, 3000 //Время появления в милисекундах | Appear time in milliseconds
    )
  } catch (e) {}
});

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic-ext,latin-ext);

/* modal */

#comebacker {
  background: url(img/bgexit.png);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
}

#comebacker .close-undermodal {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

#comebacker .close-over {
  background: url(img/close.png) no-repeat 0 0;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

#comebacker .close-over:hover {
  background-position: 0 bottom;
}

#comebacker .over-window {
  background: url(img/product.png) no-repeat 40px center #fff;
  cursor: default;
  left: 0;
  right: 0;
  top: 10%;
  margin: 0 auto 20px auto;
  position: fixed;
  padding: 60px 20px 60px 20px;
  width: 560px;
  z-index: 9999;
  position: relative;
  font-family: 'PT Sans', arial, sans-serif !important;
}

#comebacker .title-comebacker {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  text-align: center;
  padding: 0 0 30px 0;
  margin: 0 0 0 50%;
}

#comebacker .title-oui div {
  font-size: 20px;
}

#comebacker .form {
  margin: 0 0 0 50%;
}

#comebacker .form form {
  margin: 0 !important;
}

#comebacker .form input[type="text"] {
  background: #fff;
  border: 1px solid #a5a5a5;
  outline: none;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  font-family: 'PT Sans', arial, sans-serif;
  width: 250px;
  box-sizing: border-box;
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  padding: 0 20px;
  display: block;
  margin: 0 auto 20px auto;
}

#comebacker .form input[type="text"]:focus {
  border: 1px solid #054155;
}

#comebacker .form input[type="submit"] {
  background: #054155;
  cursor: pointer;
  border-radius: 5px;
  -moz-border-radius: 5px;
  outline: none;
  height: 50px;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'PT Sans', arial, sans-serif;
  width: 250px;
  display: block;
  margin: 0 auto 0 auto;
  border: 0px;
  color: #ffffff;
}

#comebacker .form input[type="submit"]:hover {
  background: #10a9dc;
}

.comebackerhidden {
  overflow: hidden;
}

<!doctype html>
<html>

<head>
  <title>Comebacker</title>
  <link type="text/css" rel="stylesheet" href="comebacker/css.css" />
  <script type="text/javascript" src="comebacker/script.js"></script>
  <script src="jquery-3.6.1.min.js"></script>
</head>

<body>
  <div id="comebacker">
    <div class="close-undermodal"></div>
    <div class="over-window">
      <div class="close-over"></div>
      <div class="title-comebacker">
        <div>Order today!</div>
        Only: 15 $.
        <div>50% discount</div>
      </div>
      <div class="form">
        <form method="post" action="">
          <input type="text" name="name" value="" placeholder="Name" />
          <input type="text" name="phone" value="" placeholder="Phone" />
          <input type="submit" name="submit" value="Order" />
        </form>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</body>

</html>

В результате после закрытия файла main.html окно камбекера не возникает. Подскажите как добиться возникновения окна камбекера. Привожу структуру проекта

БЛОГ НА HUSL

Не срабатывающий popstate и beforeunload

Ответы (0 шт):