It is necessary to put a comebacker script so that when you click on the back button or close the window, a window pops up with a text like "Wait! There is a unique offer for you - a 50% discount".
An example of a script is in this article: https://yellowweb.top/скрипт-comebacker/.
I made up the next page using the comeback.
<!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>
<script src="myPopupWindow.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>As a result, after closing the main.html file, the comeback window does not appear. Tell me how to achieve the appearance of the comeback window.
I bring the structure of the project
comebacker project structure 1
comebacker project structure 2
Here is the content of css.css and script.js files
$(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).popstate(function(e){
$('#comebacker').fadeIn(300);
$('body').addClass('comebackerhidden');
comebacker = false;
});
$(window).beforeunload(function(e){
$('#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) {}
});
and file css.css
@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;
}