Exit intent popup is very widely used by websites because of lead generation (which is a part of Digital Marketing) and also for getting users in on website. Using bootstrap modal we create an exit intent popup.
First thing what is exit popup?
Explanation: Exit intent popups basically appears on website or web pages when the user bounce back (or when user going to close that tab) from our website.
Exit intent popup Script
Here we are creating Exit intent popup using the bootstrap modal. Below are the Four Steps for How to Create an Exit Intent Popup,
- Including required scripts like, exitIntent JS, bootstrap css & js CDN.
- After Including, we create a bootstrap modal (responsive popup) which is appear at end.
- Using CSS, we design that modal.
- At end, For calling that modal we create a JS script. (Important Point)
Required Scripts
Below are the scripts of JQuery CDN, Bootstrap CSS CDN, JQuery ExitIntent JS, and Bootstrap JS CDN.
|
1 2 3 4 5 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="http://tbz.alokitechnologies.com/js/jquery.exitintent.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
check this: JavaScript Array | Array length, push, pop, shift, unshift, IndexOf, forEach
Creating a Bootstrap Modal
Here we create a responsive popup using the bootstrap modal. See the below code,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div id="warning"> <h3 class="text-center">After 2 second move your cursor above the page near the close tab.</h3> <div class="modal fade" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="container register-form"> <div class="form"> <div class="note"> <p>Subscribe Our Newsletter</p> </div> <div class="form-content"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="email" class="form-control" placeholder="Your Email *" value=""/> </div> </div> </div> <button type="button" class="btnSubmit">Submit</button> </div> </div> </div> </div> </div> </div> </div> |
Bootstrap Modal Design using CSS
Here is the CSS code for the design of the background body and bootstrap modal. Check below code,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
html{ width:100%; height:100%; } body{ margin:0; margin-top:20px; font: 100 16px/1em 'Roboto Slab', serif; color:#fff;background: #F1F2B5; background: -webkit-linear-gradient(to left, #F1F2B5 , #135058); background: linear-gradient(to left, #F1F2B5 , #135058); } .note { text-align: center; height: 80px; background: -webkit-linear-gradient(left, #0072ff, #8811c5); color: #fff; font-weight: bold; line-height: 80px; } .form-content { padding: 5%; border: 1px solid #ced4da; margin-bottom: 2%; } .form-control{ border-radius:1.5rem; } .btnSubmit { border:none; border-radius:1.5rem; padding: 1%; width: 20%; cursor: pointer; background: #0062cc; color: #fff; } |
Creating an Exit Popup JS script
On this script, when a user going out from website then the Exit Popup appears. After one time the popup not coming till next refresh or next navigation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var n = 1; $(function() { $.exitIntent('enable'); $(document).bind('exitintent', function() { if(n == 1){ $("#warning").slideDown(); $('.modal').modal({ show: true }); n++; } n++; }); }); |
From that link download the complete Exit Intent Popup Script: Click Here
LIVE VIEW OF Exit Intent Popup
Check Also:
Best PHP IDE and Code Editor in 2019
Happy Coding..!
[…] How to Create an Exit Intent Popup […]