:::: MENU ::::

Cross browser exitsplash implementation using jQuery and CSS

JQuery Plugin – exitsplash

Spoiler Alert –

  • Don’t use “exit”, “popup”, “splash”, “exitsplash” word in your script-name. Browser Plugin Ad blocker Plus will block it.
  • Don’t use meta x-frame-options in exit page.
  • It won’t work on iphone, try some delayed overlay instead.

Many marketing promotion shows video promos and uses exitsplash popup page to increase lead chances. It’s good idea to drive user attention towards product buying process by showing them more offers in exitpopup.

So, let’s code jQuery plugin to achieve it.
Usually javascript method window.onbeforeunload fires when you close your browser.
i.e.

exp

Above function will show alert window and ask user if he wants to stay on page?

Now let’s implement jQuery Plugin for it.

Step 1:- code for exit event.

We can get jQuery wrapper for window.onbeforeunload like this.

Step 2:- create HTML markup for exit window and insert into DOM.

Step 3:- Handle Firefox

Firefox doesn’t show “Message” while asking user to stay on page. So we can show alert message to user.

Update (24 oct 2014): https://github.com/vikaskbh/exitsplash/issues/1

Step 4: Handle forms

If you have any lead generation form then we can prevent exitsplash to fire following way.

Step 5: provide options to user so that user can customize exit popup message and exit page url.

So final Plugin would be,

How to use it?

See demo: http://code.vikaskbh.com/exit_splash_demo/xs.html

Download from my github repository.


So, what do you think ?

  •