Creating a Jquery Exit Popup

Isn’t it super annoying when you visit a website and upon closing the page a Javascript alert Pops up and asks you if you really want to leave or stay on the site. Instead a less annoying way of doing this would be to use Jquery and when the users cursor reaches the top of the page, usually a sign that the user is going to close the webpage, a Jquery lightbox will popup.

This is very easy to accomplish and I think it’s absolutely ridiculous to have to pay for this kind of functionality, for instance Action Popup is a simple script that you install on your server and it will display a Jquery exit popup on the page when the user is about to exit. They want to sell you this script for $47. Well, instead of paying that $47, just simply download the following file:

DOWNLOAD | DEMO

all that is required is to include ‘exitpopup.php’ to your server and include it on your page:


include('exitpopup.php');

That’s it, now you’ll have an exit popup on your page. Oh, Yeah you’ll need to make sure that the JQuery library is being linked to on the page.

You can simply view the Demo here. Or Download the script here.

Hope someone can find this useful. And if you have any questions at all, please feel free to drop me a comment :) Thank You.

  • Ron

    Any way to make this work only when the mouse is moving upward? If you typed in the URL in your browser instead of arriving from the link, the “exit popup” appears as you move your mouse down from the URL entry area.

    If there was a way so it only executed up from an upward motion and not downward, it would work a lot better.

  • John

    Nice, but if page is scrolled down you can leave at top without seeing pop-up.

  • Matt

    Nice script. Much less obtrusive than some other annoying pop ups. I modified it to take into account the window’s scroll position and the mouse’s movement direction in an attempt to only fire it off when the mouse is moving up.

    Thanks!

    Matt

    Here’s the code I’m currently using:

    var oldPosition = -1;
    $(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));

    var position = e.pageY – $(window).scrollTop();
    if(position < 10){
    if(oldPosition != -1){
    if(position < oldPosition){
    // Show the exit popup
    $('#exitpopup_bg').fadeIn();
    $('#exitpopup').fadeIn();
    }
    oldPosition = position;
    }else{
    oldPosition = position;
    }
    }
    $('#divData').html(oldPosition + " : " + position);

    });

    $('#exitpopup_bg').click(function(){
    $('#exitpopup_bg').fadeOut();
    $('#exitpopup').slideUp();
    });

    });

  • http://leckr.butterpixels.com cutechinelas

    is there a way for this to store cookies, like when they do fill up that form or clicked on the “let me in now” button, this pop-up won’t show up again?

  • Tahir

    What will happen when i press “ctrl+w” closing the browser’s tab…
    Yes.. the popup not apper .. :)

    Any solution..?

  • http://www,citruskiwi.com Ian Shere

    I’m not coder, so I’m stuck. I substituted Matt’s code in the script area of the pop up code, and uploaded the 2 files to the public_html directory.

    However, nothing works. You mention about linking jQuery to the page – maybe that’s my problem. I’m using Joomla, but am not sure how I link jQuery or whether I’m even doing it right. I added the code include(‘exitpopup.php’); to the top of the article hoping that would work… sigh; I really need to learn PHP… :-)

  • Kyle Gaze Gallardo

    not sure what is wrong but the overlay background is not working on the site http://dev.sursumcreative.com/index.php?option=com_content&view=article&id=1&Itemid=102, any help please/.

  • Gyn0

    How to integrate this script into Magento 1.8.0? Thank you!

  • Mister Cee

    Background doesn’t work – so how can I add a “close button”?

    Adding

    $(document).click(function(){
    $(‘#exitpopup’).slideUp();});

    doesn’t work out, because I put a form inside the popup (when a visitor wants to type in his mailadress, name, etc. the popup would disappear). I would like to add a small “x” close button on top left or top right of the popup. Any suggestions?

  • Mister Cee

    solved with a close-button-Image ;)

    I put the closing-function back in the script referring to the Close-Button (i named it “closebutton”) and added a div with the image. i styled the image (float right, margin, etc.) until it sits, where i want it to sit – and here it goes!

    closing-function out back in the script:

    $(‘#closebutton’).click(function(){
    $(‘#exitpopup’).slideUp();
    });

    and the div for the close-button (you will need a pic of course, which you have to upload somewhere to your site, i used a small 29×29 pic with a “X” inside for this). The “style”-part is working great for me as it puts the close button to the top-right. Of course you can arrange and style how you want! here’s the div:

    works perfect for me, because the original “background” didn’t work out.

  • Bu

    I know this isn’t a question, but…please add this to your site. I found this page after Googling why I kept getting these popups when I tried to navigate away from sites (I guess I just reached critical mass in my awareness of this code being on many different sites).

    I had just had a really good experience on a site which offered excellent products and had an attractive, functional interface. My good feelings about the company /utterly/ evaporated when I got a popup as I tried to leave. It might not be logical. I know that, rationally, it only requires a few seconds to get rid of such a popup. But, it just erodes goodwill. Instead of feeling like a respected potential customer, whose experience of their website is taken into consideration (which was conveyed through clear, useable design) I immediately feel like a number on a spreadsheet as presented at a weekly staff meeting by someone whose MBA’s ink is still drying.

    I know business, particularly big business, is about numbers. I know that. But, goodwill and loyalty are often undervalued until it’s far too late.

  • Matt

    This method can cause conflicts on iPhones and disallow navigating on a page. An alternate solution would be to add a div that is x height (2 or 3 pixels) and 100% width with position=fixed. Use the div id as a trigger to launch the popup. It’s the same effect but doesn’t break the click-ability on an iphone. If you only want to trigger it once, use jquery add display:none to the triggering div.