You need create three pages.
1.) ouibounce.js
<!-------------- coding start ------------->(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory(require,exports,module);
} else {
root.ouibounce = factory();
}
}(this, function(require,exports,module) {
return function ouibounce(el, config) {
var config = config || {},
aggressive = config.aggressive || false,
sensitivity = setDefault(config.sensitivity, 20),
timer = setDefault(config.timer, 1000),
callback = config.callback || function() {},
cookieExpire = setDefaultCookieExpire(config.cookieExpire) || '',
cookieDomain = config.cookieDomain ? ';domain=' + config.cookieDomain : '',
sitewide = config.sitewide === true ? ';path=/' : '',
_html = document.getElementsByTagName('html')[0];
function setDefault(_property, _default) {
return typeof _property === 'undefined' ? _default : _property;
}
function setDefaultCookieExpire(days) {
// transform days to milliseconds
var ms = days*24*60*60*1000;
var date = new Date();
date.setTime(date.getTime() + ms);
return "; expires=" + date.toGMTString();
}
setTimeout(attachOuiBounce, timer);
function attachOuiBounce() {
_html.addEventListener('mouseleave', handleMouseleave);
_html.addEventListener('keydown', handleKeydown);
}
function handleMouseleave(e) {
if (e.clientY > sensitivity || (checkCookieValue('viewedOuibounceModal', 'true') && !aggressive)) return;
fire();
callback();
}
var disableKeydown = false;
function handleKeydown(e) {
if (disableKeydown || checkCookieValue('viewedOuibounceModal', 'true') && !aggressive) return;
else if(!e.metaKey || e.keyCode != 76) return;
disableKeydown = true;
fire();
callback();
}
function checkCookieValue(cookieName, value) {
// cookies are separated by '; '
var cookies = document.cookie.split('; ').reduce(function(prev, curr) {
// split by '=' to get key, value pairs
var el = curr.split('=');
// add the cookie to fn object
prev[el[0]] = el[1];
return prev;
}, {});
return cookies[cookieName] === value;
}
function fire() {
// You can use ouibounce without passing an element
// https://github.com/carlsednaoui/ouibounce/issues/30
if (el) el.style.display = 'block';
disable();
}
function disable(options) {
var options = options || {};
// you can pass a specific cookie expiration when using the OuiBounce API
// ex: _ouiBounce.disable({ cookieExpire: 5 });
if (typeof options.cookieExpire !== 'undefined') {
cookieExpire = setDefaultCookieExpire(options.cookieExpire);
}
// you can pass use sitewide cookies too
// ex: _ouiBounce.disable({ cookieExpire: 5, sitewide: true });
if (options.sitewide === true) {
sitewide = ';path=/';
}
// you can pass a domain string when the cookie should be read subdomain-wise
// ex: _ouiBounce.disable({ cookieDomain: '.example.com' });
if (typeof options.cookieDomain !== 'undefined') {
cookieDomain = ';domain=' + options.cookieDomain;
}
document.cookie = 'viewedOuibounceModal=true' + cookieExpire + cookieDomain + sitewide;
// remove listeners
_html.removeEventListener('mouseleave', handleMouseleave);
_html.removeEventListener('keydown', handleKeydown);
}
return {
fire: fire,
disable: disable
};
}
;
}));
<!-------------- coding end ------------->
2.) ouibounce.min.css
<!-------------- coding start ------------->
#ouibounce-modal{font-family:'Open Sans',sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%}#ouibounce-modal .underlay{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);cursor:pointer;-webkit-animation:fadein .5s;animation:fadein .5s}#ouibounce-modal .modal{width:600px;height:450px;background-color:#f0f1f2;z-index:1;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:4px;-webkit-animation:popin .3s;animation:popin .3s}#ouibounce-modal .modal-title{font-size:18px;background-color:#252525;color:#fff;padding:10px;margin:0;border-radius:4px 4px 0 0;text-align:center}#ouibounce-modal h3{color:#fff;font-size:1em;margin:.2em;text-transform:uppercase;font-weight:500}#ouibounce-modal .modal-body{padding:20px 35px;font-size:.9em}#ouibounce-modal p{color:#344a5f}#ouibounce-modal form{text-align:center;margin-top:35px}#ouibounce-modal form input[type=text]{padding:12px;font-size:1.2em;width:300px;border-radius:4px;border:1px solid #ccc;-webkit-font-smoothing:antialiased}#ouibounce-modal form input[type=submit]{text-transform:uppercase;font-weight:700;padding:12px;font-size:1.1em;border-radius:4px;color:#fff;background-color:#4ab471;border:none;cursor:pointer;-webkit-font-smoothing:antialiased}#ouibounce-modal form p{text-align:left;margin-left:35px;opacity:.8;margin-top:1px;padding-top:1px;font-size:.9em}#ouibounce-modal .modal-footer{position:absolute;bottom:20px;text-align:center;width:100%}#ouibounce-modal .modal-footer p{text-transform:capitalize;cursor:pointer;display:inline;border-bottom:1px solid #344a5f}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-ms-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes popin{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-ms-keyframes popin{0%{-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-ms-transform:scale(1);transform:scale(1);opacity:1}}@keyframes popin{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}}
<!-------------- coding end ------------->
3.) index.php
<!-------------- coding start ------------->
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ouibounce.js"></script>
<link rel="stylesheet" href="ouibounce.min.css">
</head>
<body>
<!-- OuiBounce Modal popup start-->
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>Offer for You!</h3>
</div>
<div class="modal-body"><iframe src="https://adslinks.in/popup/index.php" frameborder="0" scrolling="auto" width="100%" height="350px" marginwidth="0" marginheight="0" ></iframe>
<p> <a href="#" onclick="close_window();return false;">-</a></p>
</div>
<div class="modal-footer">
<p>no thanks</p>
</div>
</div>
</div>
<!-- Example page JS -->
<!-- Used to fire the modal -->
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
</script>
<!-------------- coding end -------------></body>
</html>
