Exit Popup Modal Window Using jQuery

Tutorial: Explaining with demo to create a jQuery exit modal popup box or window on mouse hover near the “X” button of the browser.

jQuery Exit Modal Popup Box

This window says a final good bye and wishes them to return to the website to read more contents before they exit or try to exit the browser window where your website is being displayed. The modal window appears on top on all the content before you leave the website. Below is a short objective of the tutorial and the explanation follows.

OBJECTIVE OF THE TUTORIAL:

  • Create a Exit popup Modal Box
  • Create the popup only on hovering the mouse near the exit button of the browser
  • Create a overlay effect for the popup window

DEMO

EXPLANATION:

The tutorial uses the jQuery plugin version jquery.min.js and the modal window script by name jquery.simplemodal.js which actually does most of the rendering.
The credit for this tutorial actually goes to Eric Martin.
The final JavaScript which does the initialization of the modal window on exit is init.js.
The example uses two jQuery plugins and a initialization script.
Here is the init.js script below:
JAVASCRIPT Code: init.js
The main function which triggers the exit modal window on mouse hover is given below:
The HTML used in my demo is given below, which is simple to understand:
HTML Code:
You can view the complete source of the demo by viewing the page source.
When the HTML page is ready and loaded the init.js gets initialized and checks if the mouse cursor is moving anywhere near the exit button of the browser. In this example the top position is set to 5px in the init.js, which can be altered according to your needs. Please let us know if you want any other details regarding the working of the modal window by commenting.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...

7 Responses

  1. Chris says:

    This looks like an awesome script. How would I implement that in wordpress?

  2. T Haynes says:

    Hello… This doesn’t seem to work in IE8

    • Hi Haynes, This script is designed for modern browsers. Maybe this is a disadvantage, but there must be an alternative. Will find out soon. Thanks for your finding..

  3. Frank says:

    how do I get the overlay to work?

  4. Mike says:

    Doesn’t work in IE 9 either