#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2015
    Posts
    13
    Rep Power
    0

    Lightbulb jQuery CSS Modal PopUp Help Needed


    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:
    Code:
       <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;
    }
    
    #exitpopup{
    text-align:center;
    }
    
    #exitpopup h1{
    margin-top:0px;
    padding-top:0px;
    }	
    	
    #exitpopup p{
    text-align:left;
    }
    
    </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>
    
    
    
    <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.
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,552
    Rep Power
    112
    In reference to jQuery, would the below be an option to bind to your BODY or a major DIV tag or such?
    https://api.jquery.com/mouseleave/
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2015
    Posts
    13
    Rep Power
    0

    Lightbulb


    I'll have to take a look to see & then I'll let you know. Thanks.

    Originally Posted by Triple_Nothing
    In reference to jQuery, would the below be an option to bind to your BODY or a major DIV tag or such?
    https://api.jquery.com/mouseleave/
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2015
    Posts
    13
    Rep Power
    0
    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://socialtriggers.com/list-building/

    https://longtailpro.com/

IMN logo majestic logo threadwatch logo seochat tools logo