2 Replies - 608 Views - Last Post: 23 December 2017 - 10:05 AM

#1 AaronEsteban   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 28-February 16

jQuery Modal PopUp Help Needed

Posted 22 December 2017 - 10:19 PM

So I have this code, but it does NOT trigger the way that I would like it to. I'm new to learning jQuery (a month or two) so I'm still not 100% with understanding this code that I have.

The code is supposed to create an "exit popup" to help folks learn about my subscribers newsletter, but it doesn't open if you scroll down the page & then try to exit. It only fires off if you are at the top of the page & then try to move off to click on the exit tab.

I need the code to fire off even when the user has scrolled down the page, & preferably have it only fire off no more than 2 times in one session. I know that this would also require some kind of cookie install.

Anyhow, here is the current code that I'm working with:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<style type="text/css">

			body
			{
				margin:0px;
				padding:0px;
				font-family:'Helvetica Neue', Helvetica, Arial, Courier;
				text-align:center;
			}

			code
			{
				width:800px;
				display:block;
				white-space:pre;
				width:600px;
			}			
		
		</style>
		<script type="text/javascript">

	$(document).ready(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();
			}
		
		});
		
		$('#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:#000000; opacity: .8; filter:alpha(opacity=0.8); z-index:999998;" id="exitpopup_bg">
	
</div>
<div style="width:670px; height:450px; margin:0px auto; display:none; position:fixed; color:gold; padding:20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; z-index:999999; background:black;" id="exitpopup">
		<h1>Wait! You're Going To Need This Software!...</h1>
		<p>
<center><h2 style="color:red; font-size:23px; font-family:verdana; margin-top:-23px;">POWERFUL <span style="color:white;">Keyword Suggestions SEO Software!</span></h2></center>
<a href="http://ultimatekeyworddrillerpro . com">
<img src="boxshot.png" style="width:230px; height:230px; float:left; margin-top:-10px; margin-left:-20px;"/>
<img src="UltimateKeywordDrillerPro.png" style="width:230px; height:180px; float:left; margin-top:-10px; margin-left:-10px;"/>
<img src="GKPData.png" style="width:220px; height:180px; float:left; margin-top:-10px; margin-left:10px;"/>
</a>
</p>
<a href="http://ultimatekeyworddrillerpro . com"><img src="DownloadNow.png" style="width:558px; height:160px border:0px; margin-top:-50px;" /></a>


</div>



Would appreciate the help with getting the code to popup regardless if the user is at the top of the page or bottom. Thanks in advance if you can offer any help.

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery Modal PopUp Help Needed

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5494
  • View blog
  • Posts: 14,468
  • Joined: 18-April 07

Re: jQuery Modal PopUp Help Needed

Posted 23 December 2017 - 12:39 AM

Well the part to focus on here is the e.pageY <= 5 part. When you scroll down and then move the mouse up, the mouse coordinates are further down the page and thus won't be less than 5. For instance if the height is 1000 and you scroll down half way, you are at 500px at the top of the window. So when you move the mouse up, your Y coordinate will be in the 500's.

So, what you might want to try to experiment with is if e.clientY which will give you the coordinates in relation to the client area (the visible window itself where the top left is always 0,0 despite having scrolled down), not the entire page.

https://developer.mo...seEvent/clientY

Hope this helps. :)
Was This Post Helpful? 0
  • +
  • -

#3 AaronEsteban   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 28-February 16

Re: jQuery Modal PopUp Help Needed

Posted 23 December 2017 - 10:05 AM

Okay, I'll have to take a look and let you know what I think. THanks.

View PostMartyr2, on 23 December 2017 - 12:39 AM, said:

Well the part to focus on here is the e.pageY <= 5 part. When you scroll down and then move the mouse up, the mouse coordinates are further down the page and thus won't be less than 5. For instance if the height is 1000 and you scroll down half way, you are at 500px at the top of the window. So when you move the mouse up, your Y coordinate will be in the 500's.

So, what you might want to try to experiment with is if e.clientY which will give you the coordinates in relation to the client area (the visible window itself where the top left is always 0,0 despite having scrolled down), not the entire page.

https://developer.mo...seEvent/clientY

Hope this helps. :)/>


Oh, and btw, here are a few of great examples that I'm trying to achieve. These sites are using perfect "Exit Popups":

https://www.traffictravis.com/

https://socialtrigge.../list-building/

https://longtailpro.com/
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1