So guys, I have an exit PopUp it already worked but when I scroll down the site page down, it can't appear again. please help me find the problem. I really don't know what's wrong. well thx, sorry for bad English
<script type="text/javascript" src="asset/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).mousemove(function(e) {
$('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
$('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));
if(e.pageY <= 5)
{
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
}
});
$('.close').click(function(){
$('#exitpopup_bg').fadeOut();
$('#exitpopup').fadeOut();
});
$('#exitpopup_bg').click(function(){
$('#exitpopup_bg').fadeOut();
$('#exitpopup').slideUp();
});
});
</script>
<style type="text/css">
#exitpopup{
text-align:center;
}
#exitpopup h1{
margin-top:0px;
padding-top:0px;
}
#exitpopup p{
text-align:left;
}
</style>
<div style="display: none; width:100%; height:100%; position:fixed; background:black; opacity: .3; filter:alpha(opacity=0.8); z-index:999998;" id="exitpopup_bg">
</div>
<div style="width:50%; height:auto; margin:0px auto; display:none;position:fixed; color:#ffffff; padding:20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; z-index:999999;" id="exitpopup">
<img src="asset/PopUp.png" />
</div>
The problem is in
if(e.pageY <= 5)
you can't catch the e.pageY <= 5
after scroll .. so you need
if(e.pageY - $(window).scrollTop() <= 5)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.