Create An Exit Popup When Leaving Website – ouibounce.js

Category: Javascript , Modal & Popup , Recommended | June 2, 2014
Author:carlsednaoui
Views Total:35,548 views
Official Page:Go to website
Last Update:June 2, 2014
License:MIT

Preview:

Create An Exit Popup When Leaving Website – ouibounce.js

Description:

ouibounce.js is an useful script that intelligently detects the mouse behaviors and then pops up a modal window when your visitors are about to close the current webpage. Helpful for internet marketing to increase the landing page conversion rates greatly. Side-wide cookie is supported.

How to use it:

Add the jQuery javascript library in your landing page.

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

Add the OuiBounce CSS & Javascript in the head section of your landing page.

<link rel="stylesheet" href="ouibounce.min.css">
<script src="build/ouibounce.js"></script>

Create the OuiBounce Modal following the Html structure like this.

<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3> Modal Title </h3>
</div>
<div class="modal-body">
Modal Body 
</div>
<div class="modal-footer">
Modal Footer
</div>
</div>
</div>

The Javascript to fire the modal on page exit.

<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
  aggressive: true,
  timer: 0,
  callback: function() { console.log('ouibounce fired!'); }
});
$('body').on('click', function() {
  $('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
  $('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
  e.stopPropagation();
});
</script>

You Might Be Interested In:


11 thoughts on “Create An Exit Popup When Leaving Website – ouibounce.js

  1. Dougles

    Very nice script! Thank´s

    But I have a question… I want that the windows work only “1 time” in the day. When the same user come next day the Popup must work again. How can I make this?
    Thank you for the help.

    Reply
  2. Aivan

    nice work . . . is there anyway to put the facebook like button on the modal box? Please help… Thanks…

    Reply
  3. roofingcalculator

    Great work, thanks!

    I got it to work, but if there are Google ADs on page, they display ABOVE (on top) of the popup.

    How do I make popup float OVER ads?

    Please help

    Reply
  4. saugata kar

    Its working fine in Firefox…But I don’t find it working in other browsers like Sarafi, Chrome… Can you please help

    Reply
  5. east 542

    It doesn’t work. The popup happens then after a second or two I go wherever I clicked to go. I tried the demo page and then clicked on one of my browser bookmarks.

    Reply
  6. check

    The article is interesting. how can this work if i want to show the dialog only when user clicks the close(X) button of the browser.

    Reply
  7. nk

    it is conflicting with bootstrap.min.css how do I fix this?

    Reply

Leave a Reply