Jquery Exit Popup script

[techman41973]

I want to create what is called an "Exit Popup" in Jquery with the following attributes

1. The popup is triggered when the visitor moves their mouse outside of the page.
2. The popup box enters from either the left or right, outside the page.
3. When the Exit Popup appears, I want it to have an "X" or close button, so the visitor can close the popup.
4. I want a checkbox inside the popup that says "don't show this again".
5. If the visitor clicks to "check" the checkbox, I want the exit popup to dissapear and a cookie placed in the visitor's browser.
6. I want the code to prevent execution of the popup if it finds this cookie in the visitor's browser

I would appreciate some direction on developing this.

[diafol]

Have you thought about how annoying this could be? Most scripts do an 'are you sure' browser confirm modal just on leaving - which can be annoying enough. Is the 'popup' a 'faux dialog' or a system modal? The checkbox would suggest a custom dialog.

Does it have to be jQuery? Unless you're using a number of plugins or some serious jq code, do you need a whole library just for that? If you're using jq anyway, have a look at some existing plugins or ui widgets / modal dialogs, such as jqueryUI.

The cookie stuff is pretty trivial, however, there is a jq plugin:

https://github.com/carhartl/jquery-cookie

[Dani]

OK, so this is a bit tricky. Normally when I hear the word 'exit popup' I think of showing up when the visitor tries to leave the page, by either clicking close on their web browser, clicking the back button on their browser, or clicking on a link or ad to navigate off of the page.

Doing that in jQuery is as easy as binding something to the beforeunload handler.

$(window).on('beforeunload', function() {
    alert("Noooo! Don't leave me!");
});

I assume you want to go the jQuery route regardless, so what you're looking for is a whole lot trickier because you actually want to have a listener that is following the mouse cursor around for as long as the webpage is open, and is tracking when the mouse cursor goes out of bounds.

So let's start with item #1 in your list: triggering the popup when the visitor moves their mouse outside of the page.

We can do something like this:

$(window).on('mouseout', function() {
    alert("Noooo! Don't leave me!");
});

So now we want the popup to animate in from outside the page. So instead of a simple alert(), let's make a div and make it hidden. We can always add CSS to the div later to make it look like a popup. For now, let's just have it hidden by default. Then, when we want to trigger it, well have it animate in.

<div id="popup" style="display:none">Noooo! Don't leave me!</div>
$(window).on('mouseout', function() {
    $('#popup').slideDown('slow');
});

Let's take this a step further and use the jQuery UI dialog plugin. This will help us create a nice looking modal dialog without a lot of work on our end.

http://jqueryui.com/dialog/#animated

We just need to include the jQuery UI javascript and CSS to our page. Then we can do something like this:

// The popup div
<div id="popup" title="Don't Go!"><p>Nooooo</p></div>

// jQuery ready fn that defines how we want our dialog to look/act
$(function() {
    $('#popup').dialog({
        autoOpen: false
    });
});

// Bind an event handler to moving the mouse cursor out of bounds
$(window).on('mouseout', function() {
    // Launch the popup
    $('#popup').dialog('open');
});

This is very, very rudimentary, but jQuery UI does all of the fancy animations and effects you are looking for, flying in and such. You just need to play around a bit with the effects you want.

Sorry, I have no previous experience with creating cookies from within javascript ... I always create my cookies from the serverside. I'm sure you could google search this just as well as I could, so why don't you first get the rest of it working and then you can look into this part of it.