Author: | carlsednaoui |
---|---|
Views Total: | 35,548 views |
Official Page: | Go to website |
Last Update: | June 2, 2014 |
License: | MIT |
Preview:

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>
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.
Set a cookie and check against it 🙂
nice work . . . is there anyway to put the facebook like button on the modal box? Please help… Thanks…
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
Its working fine in Firefox…But I don’t find it working in other browsers like Sarafi, Chrome… Can you please help
Hi there. Where´s the mail-configuration?
Thanks a lot
http://www.ny1hotel.com
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.
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.
it is conflicting with bootstrap.min.css how do I fix this?
found this fix for bootstrap.. hadto rename .model classes etc https://github.com/carlsednaoui/ouibounce/issues/64