Here is a demo with source code that shows how to initiate any action when a user tries to get off the site or browser’s viewport. A modal with some more information or email signup can be used for lead capturing or driving user attention to content on your website.
Exit Intent popups are probably the best popup implementation to retain users back to your website then initiating a popup after some specified read time or scroll to the bottom as they distract users from what they are interested in, which can lead them to ignore your content and close your site.
Personally, I recommend not to add this to web development blog post pages where users need to switch between tabs to practically implement the information they knew from your blog.
DEMO
Open demo in a new tab – https://demos.webdevpuneet.com/jquery/exit-intent-popup/index.html
jQuery Code
Here is the logic used to trigger the modal appearance on the user mouse leaving the browser viewport.
(function($) {
$(document).ready(function() {
if ( $(window).width() > 991) {
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
$('.exitLightbox').show();
};
});
$('a.exitLightbox__close, .exitLightbox__closer').click(function() {
$('.exitLightbox').hide();
});
}
})
})(jQuery);Demo Source Code
<!doctype html>
<html lang="en" id="html">
<head>
<title>Exit Intend Popup - jQuery</title>
<link rel="canonical" href="https://demos.webdevpuneet.com/jquery/exit-Intent-popup/index.html" />
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="" />
<meta name="description" content="Exit intent popup jQuery" />
<meta name="author" content="webdevpuneet.com" />
<meta name="copyright" content="webdevpuneet.com" />
<style>
*{box-sizing:border-box;}
.exitLightbox {
display: none;
position: fixed;
z-index: 111111;
width: 100%;
height: 100%;
overflow-y: auto;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.logged-in .exitLightbox{display: none!important;}
.exitLightbox__closer{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.exitLightbox__inner {
position: absolute;
padding: 10px;
top: 0;
left: 50%;
transform: translate(-50%, 0);
background: #fff;
width:1080px;
max-width:100%;
}
.exitLightbox__close {
position: absolute;
right: 5px;
top: 5px;
margin: 0px 0 0 0;
width: 50px;
height: 50px;
font-size: 45px;
font-weight: bold;
text-align: center;
border-radius: 50%;
cursor: pointer;
text-decoration: none;
border: 1px solid;
z-index: 1111;
padding-top: 0;
color: #000;
}
.exitLightbox .tools-top-ad-wrapper h2 {
line-height: 1;
padding-top: 5px;
text-align: left;
font-size: 26px;
margin-top: 0;
}
.exitLightbox__img{
max-width: 100%;
height: auto;
float: left;
width: 90px;
border: 1px solid #cecece;
border-radius: 50%;
margin-right: 10px;
margin-bottom: 10px;
}
.tools-top-ad{
width: 100%;
line-height: 1;
color: #000;
text-align: left;
padding:10px 0;
white-space: nowrap;
overflow-x: auto;
height: 215px;
}
.tools-top-ad, .tools-top-ad *{
box-sizing: border-box;
}
.tools-top-ad h2{
text-align: left;
line-height: 1;
}
.tools-top-ad > a{
display: inline-block;
width:120px;
height:170px;
position: relative;
text-decoration: none;
border:1px solid #cecece;
font-size: 13px!important;
vertical-align: top;
margin-bottom: 5px;
transition: 0.23s ease-in;
text-align: center;
color: #000;
background: rgba(0, 0, 0, 0.05);
}
.tools-top-ad > a > img{
display: block;
width: 100%;
border-bottom: 1px solid #cecece;
opacity: 0.85;
}
.tools-top-ad > a:hover{
text-decoration: none;
background: #eaeaea;
}
.tools-top-ad > a> h4{
padding: 7.5px 10px;
margin:0;
font-size: 13px!important;
color:#000!important;
white-space: normal;
}
</style>
</head>
<body style="padding:15px;margin:0;font-family: Arial, Helvetica, sans-serif;">
<h1>Exit Intent Popup</h1>
<p>Move your mouse out of the browser screen for popup to appear.</p>
<aside class="exitLightbox">
<div class="exitLightbox__closer"></div>
<div class="exitLightbox__inner">
<a href="javascript:;" class="exitLightbox__close">×</a>
<div class="tooladsaside">
<div class="tools-top-ad-wrapper">
<img class="exitLightbox__img" src="https://webdevpuneet.com/wp-content/uploads/2021/06/logo4.png">
<h2>Top Online Web Development Tools (Free)</h2>
<p><b>Check out and bookmark</b> these online tools, popular among web developers for interactive-learning, creativity, and better productivity at work. Please ignore if you are already using them. Thank you</p>
<div class="tools-top-ad">
<a href="https://tools.webdevpuneet.com/image-compressor/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/image-compressor/image-compression-180.png" alt="Image Compression">
<h4 class="card-title">Image Resizer & Compressor</h4>
</a>
<a href="https://tools.webdevpuneet.com/color-picker/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/color-picker/color-picker-180.png" alt="Color Picker">
<h4 class="card-title">Color Picker</h4>
</a>
<a href="https://tools.webdevpuneet.com/difference-checker/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/difference-checker/difference-checker-180.png" alt="Difference Checker">
<h4 class="card-title">Text/Code Difference Checker</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-clip-path-generator/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/css-clip-path-generator/css-clip-path-generator-180.png" class="card-img-top" alt="CSS Clip Path Generator">
<h4 class="card-title">CSS Clip Path Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-box-shadow-generator/">
<img src="https://tools.webdevpuneet.com/css-box-shadow-generator/box-shadow-180.png" class="card-img-top" alt="CSS Box Shadow Generator">
<h4 class="card-title">CSS Box Shadow Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-text-shadow-generator/">
<img src="https://tools.webdevpuneet.com/css-text-shadow-generator/text-shadow-180.png" class="card-img-top" alt="CSS Text Shadow Generator">
<h4 class="card-title">CSS Text Shadow Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-gradient-generator/">
<img src="https://tools.webdevpuneet.com/css-gradient-generator/gradient-180.png" class="card-img-top" alt="CSS Gradient Generator">
<h4 class="card-title">CSS Gradient Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-animated-gradient-generator/">
<img src="https://tools.webdevpuneet.com/css-animated-gradient-generator/animated-gradient-180.png" class="card-img-top" alt="CSS Animated Gradient Generator">
<h4 class="card-title">CSS Animated Gradient Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-easing-generator/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/css-easing-generator/easing-180.png" alt="CSS Easing Function Generator">
<h4 class="card-title">CSS Easing Function Generator</h4>
</a>
<a href="https://tools.webdevpuneet.com/image-to-base64-converter/">
<img style="padding:15px;" src="https://tools.webdevpuneet.com/image-to-base64-converter/image-to-base64-180.png" alt="Image to Base64 Converter">
<h4 class="card-title">Image to Base64 Converter</h4>
</a>
<a href="https://tools.webdevpuneet.com/css-autoprefixer/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/css-autoprefixer/css-autoprefixer-180.png" class="card-img-top" alt="CSS Autoprefixer">
<h4 class="card-title">CSS Autoprefixer</h4>
</a>
<a href="https://tools.webdevpuneet.com/html-css-js-minifier/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/html-css-js-minifier/minifier-180.png" alt="HTML, CSS, JS Minifier">
<h4 class="card-title">Code Minifier</h4>
</a>
<a href="https://tools.webdevpuneet.com/js-minify-and-uglify/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/js-minify-and-uglify/uglify-js-180.png" alt="Uglify/Minify JS">
<h4 class="card-title">Uglify/Minify JS</h4>
</a>
<a href="https://tools.webdevpuneet.com/beautifier/html/">
<img style="padding:10px;" src="https://tools.webdevpuneet.com/beautifier/beautifier-180.png" alt="HTML, CSS, JS Beautifiers">
<h4 class="card-title">HTML, CSS, JS Beautifiers</h4>
</a>
</div>
</div>
</div>
</div><!-- /.exitLightbox__inner -->
</aside><!-- /.exitLightbox -->
<div class="article-link" style="margin-bottom:20px;">
<a href="https://webdevpuneet.com/scroll-to-top-jquery/" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;text-transform:uppercase;">View Source Code & Article</a>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.js" ></script>
<script>
(function($) {
$(document).ready(function() {
if ( $(window).width() > 991) {
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
$('.exitLightbox').show();
};
});
$('a.exitLightbox__close, .exitLightbox__closer').click(function() {
$('.exitLightbox').hide();
});
}
})
})(jQuery);
</script>
</body>
</html>