How to Create an Exit Popup with Jquery
Today we are sharing exit popup with jquery, use the following code for creating exit popup with jquery. Please download the zip file for working demo.
<!DOCTYPE html>
<html>
<head>
<title>Creative Tweets| Exit popup jquery</title>
<!-- Creative Tweets | WordPress Tips and Tricks | CSS HTML Hacks -->
<!-- http://www.creativetweets.com/ -->
<link rel="stylesheet" href="creativetweets.css">
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Creative Tweets | WordPress Tips and Tricks | CSS HTML Hacks -->
<script src="creativetweets.js"></script>
</head>
<body>
<h1>Try leaving this page to see Creative Tweets exit popup</h1>
<!-- Creative Tweets | WordPress Tips and Tricks | CSS HTML Hacks -->
<div id="creativetweets-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>Creative Tweets | Creativetweets.com</h3>
</div>
<div class="modal-body">
<p>Creative Tweets | WordPress Tips and Tricks | CSS HTML Hacks</p>
<p>Creative Tweets providing latest Design Tips and Hacks, stuffs and resources like css , html5 hacks, wordpress plugins, free wordpress themes, free html. Visit: <a href="http://www.creativetweets.com/" target="blank">Creativetweets.com</a></p>
<img src="http://www.creativetweets.com/wp-content/uploads/2016/07/logo.png" alt=""/> </div>
<div class="modal-footer">
<p>no thanks</p>
</div>
</div>
</div>
<script>
var _ouibounce = ouibounce(document.getElementById('creativetweets-modal'), {
aggressive: true,
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});
$('body').on('click', function() {
$('#creativetweets-modal').hide();
});
$('#creativetweets-modal .modal-footer').on('click', function() {
$('#creativetweets-modal').hide();
});
$('#creativetweets-modal .modal').on('click', function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
Download Working Demo: [email-download-link namefield=”YES” id=”3″]
