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

This time I will share jQuery Plugin and tutorial about Lightweight Exit Modal Plugin With jQuery And Bootstrap – exit-modal, hope it will help you in programming stack.

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

File Size:	3.67 KB
Views Total:	11953
Last Update:	5 years ago
Publish Date:	5 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

How to use it:

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

1
<link rel="stylesheet" href="bootstrap.min.css">

2
<script src="jquery.min.js"></script>

3
<script src="bootstrap.min.js"></script>

4
<script src="jquery.exit-modal.js"></script>

2. Create custom content for your exit modal.

01
<div class="modal exit-modal fade">

02
  <div class="modal-dialog">

03
      <div class="modal-content">

04
          <div class="modal-header">

05
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

06
              <h4 class="modal-title">Exit modal</h4>

07
          </div>

08
          <div class="modal-body">

09
              <p>Exit modal body</p>

10
          </div>

11
          <div class="modal-footer">

12
              <button type="button" class="btn btn-primary close-exit-modal">Close exit modal</button>

13
          </div>

14
      </div>

15
  </div>

16
</div>

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

`1`	`$('.exit-modal').exit<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>();`

4. Advanced usage.

01
var timer;

02
 
03
var exitModalParams = {

04
    numberToShown:                  5,

05
    callbackOnModalShow:            function() {

06
        var counter = $('.exit-modal').data('exitModal').showCounter;

07
        $('.exit-modal .modal-body p').text("Exit modal shown "+counter+" times");

08
    },

09
    callbackOnModalShown:           function() {

10
        timer = setTimeout(function(){

11
            window.location.href = "http://";

12
        }, 4000)

13
    },

14
    callbackOnModalHide:            function() {

15
        clearTimeout(timer);

16
    }

17
}

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

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

22
    e.preventDefault();

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

24
});

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

27
    e.preventDefault();

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

29
});

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

32
    e.preventDefault();

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

34
});

5. Default plugin options.

01
viewportSelector:               document,

02
showButtonClose:                true,

03
showButtonCloseOnlyForMobile:   true,

04
pageYValueForEventFired:        10,

05
numberToShown:                  false,

06
modalBackdrop:                  true,

07
modalKeyboard:                  true,

08
modalShowEvent:                 'show.bs.modal',

09
modalShownEvent:                'shown.bs.modal',

10
modalHideEvent:                 'hide.bs.modal',

11
modalHiddenEvent:               'hidden.bs.modal',

12
callbackOnModalShow:            function() {  },

13
callbackOnModalShown:           function() {  },

14
callbackOnModalHide:            function() {  },

15
callbackOnModalHidden:          function() {  }