Create an Exit Intent Popup Window

In this tutorial we’re going to create an exit intent popup window. First, we’ll talk about what exit intent is, then I’ll walk your through the steps of creating the popup window, then we’ll create the exit intent script.

We’re going to use the modal window style from a previous tutorial: pure css modal window

[tutorial_details]

What is Exit Intent?

Exit intent is a technology that tracks when the visitor is about to leave the website and then it does something. For example a subscription box popups up or something similar. Many sites use this technology to increase email subscribers and get back visitors who are about to leave.

The basic idea behind this is, that there’s a JavaScript that tracks the size of the browser window, and if the cursor leaves that box, it triggers an other function.

Here’s a tutorial on how this works: Trigger a Function on Mouse Leaving the Browser with jQuery

Creating the Modal Window

First, we need to create the modal window itself. I won’t go into details about this here, you can check the tutorial about for a more detailed explanation on this.

The HTML

<div class="lightbox" id="text">
    <div class="box">
        <a class="close" href="#">X</a>
        <!-- your title -->
        <div class="content">
        <!-- your content -->
        </div>
    </div>
</div>

The CSS

.lightbox {
    /** Hide the lightbox */
    display: none;

    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color:#333333;
    }

.lightbox:after {
    content: '';
    display: table;
    clear: both;
}

.lightbox .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width:500px;
    margin: 2% auto;
    padding:20px;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #777777;
    }

    .lightbox .title {
        margin:0;
        padding:0 0 10px 0px;
        border-bottom:1px #ccc solid;
        font-size:22px;
        }

    .lightbox .content {
        display:block;
        padding:10px 0 0 0px;
        font-size:18px;
        line-height:22px;
        }

    .lightbox .close {
        float:right;
        display:block;
        text-decoration:none;
        font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size:22px;
        color:#858585;
        }

.lightbox .open {
    /** Show lightbox when mouse leaves the browser window */
    display: block;
    outline: none;
}

Triggering the Popup with Exit-Intent

For us to be able to use this method, we’ll need to include jQuery into our project.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

After we have that, we can move on to the script. I’ll explain below.

// Exit intent
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

// Exit intent trigger
addEvent(document, 'mouseout', function(evt) {

    if (evt.toElement == null && evt.relatedTarget == null ) {
        $('.lightbox').slideDown();
    };

});

// Closing the Popup Box
$('a.close').click(function(){
    $('.lightbox').slideUp();
});

First, we create a tracks if the mouse is still on the browser window, then we we trigger it with an if statement. If it’s triggered, we slide down our popup window. After that, we create a short script, that if we click the close button the popup slides back up.

And that’s it, we have our exit-intent triggered popup window.

Please note that we didn’t add any cookie system to track if the popup was closed, so each time you close it, and move the mouse out the window, it’ll popup. We’ll cover cookies in a future tutorial.