Lightweight Exit Modal Plugin With jQuery And Bootstrap - exit-modal

exit-modal is an useful jQuery plugin for your landing page that displays a custom Bootstrap modal window when the users try to exit the current page. The plugin detects the mousemove event and triggers a modal popup when you put the cursor outside the viewport.

See also:

• jQuery Plugin For Confirmation on Leaving the Current Page - confirmExit
• Smart jQuery Plugin For Page Leave Event - pageleave
• jQuery Plugin For Smart Exit Pop Behaviour - Exit Popup
• jQuery Plugin To Pop To Another URL On Page Exit - Exitpop

How to use it:

1. Load the jQuery exit-modal plugin together with jQuery library and Bootstrap framework in your webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.exit-modal.js"></script>

2. Create custom content for your exit modal.

<div class="modal exit-modal fade">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Exit modal</h4>
          </div>
          <div class="modal-body">
              <p>Exit modal body</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-primary close-exit-modal">Close exit modal</button>
          </div>
      </div>
  </div>
</div>

3. Call the function on the modal window and done.

$('.exit-modal').exitModal();

4. Advanced usage.

var timer;

var exitModalParams = {
    numberToShown:                  5,
    callbackOnModalShow:            function() {
        var counter = $('.exit-modal').data('exitModal').showCounter;
        $('.exit-modal .modal-body p').text("Exit modal shown "+counter+" times");
    },
    callbackOnModalShown:           function() {
        timer = setTimeout(function(){
            window.location.href = "http://";
        }, 4000)
    },
    callbackOnModalHide:            function() {
        clearTimeout(timer);
    }
}

$('.exit-modal').exitModal(exitModalParams);

$('.destroy-exit-modal').on("click", function(e){
    e.preventDefault();
    $('.exit-modal').exitModal('destroy');
});

$('.init-exit-modal').on('click', function(e){
    e.preventDefault();
    $('.exit-modal').exitModal(exitModalParams);
});

$('.close-exit-modal').on('click', function(e){
    e.preventDefault();
    $('.exit-modal').exitModal('hideModal');
});

5. Default plugin options.

viewportSelector:               document,
showButtonClose:                true,
showButtonCloseOnlyForMobile:   true,
pageYValueForEventFired:        10,
numberToShown:                  false,
modalBackdrop:                  true,
modalKeyboard:                  true,
modalShowEvent:                 'show.bs.modal',
modalShownEvent:                'shown.bs.modal',
modalHideEvent:                 'hide.bs.modal',
modalHiddenEvent:               'hidden.bs.modal',
callbackOnModalShow:            function() {  },
callbackOnModalShown:           function() {  },
callbackOnModalHide:            function() {  },
callbackOnModalHidden:          function() {  }

---

This awesome jQuery plugin is developed by kwarc87. For more Advanced Usages, please check the demo page or visit the official website.