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

File Size: 3.67 KB
Views Total: 12895
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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 class="modal-body">
              <p>Exit modal body</p>
          <div class="modal-footer">
              <button type="button" class="btn btn-primary close-exit-modal">Close exit modal</button>

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


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() {


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

$('.init-exit-modal').on('click', function(e){

$('.close-exit-modal').on('click', function(e){

5. Default plugin options.

viewportSelector:               document,
showButtonClose:                true,
showButtonCloseOnlyForMobile:   true,
pageYValueForEventFired:        10,
numberToShown:                  false,
modalBackdrop:                  true,
modalKeyboard:                  true,
modalShowEvent:                 '',
modalShownEvent:                '',
modalHideEvent:                 '',
modalHiddenEvent:               '',
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.