Bootstrap Exit Pop

bs-exit-pop.js

/* Simple Bootstrap jQuery Exit Pop
 * Trigger an existing Bootstrap modal on mouseleave()
 */

/* This first version uses a variable to determine when to trigger pop. */
(function(){
  var pop = false; /* it has not pop'd */
  jQuery(document).mouseleave(function(){
    if(!pop || typeof pop === 'undefined'){
      jQuery('#myModal').modal('show'); /* show the modal */
      pop = true; /* it has pop'd */
    };
  });
})(jQuery);

/* This second version unsets `mouseleave()` once it has been triggered. */
(function(){
  jQuery(document).on('mouseleave', function(){
    jQuery('#myModal').modal('show');
    jQuery(document).off('mouseleave'); /* unset the trigger */
  });
})(jQuery);

/* This third version checks that the mouse has left at the top. This prevent scrollbar triggering exit pop. */
(function(){
  jQuery(document).on('mouseleave', function(e){
    if(e.clientY < 0){ /* only trigger if leave top */
      jQuery('#myModal').modal('show');
      jQuery(document).off('mouseleave');
    }
  });
})(jQuery);

Example:

• go to http://getbootstrap.com/javascript/
• enter one of the three JavaScript functions into the Console using Dev Tools
• move your mouse out of the window/page