javascript - Open pop-under when user leave (exit) -

i got great script found here : http://beeker.io/exit-intent-popup-script-tutorial

here js (bioep.js) code :

window.bioep = { // private variables bgel: {}, popupel: {}, closebtnel: {}, shown: false, overflowdefault: "visible", transformdefault: "",  // popup options width: 400, height: 220, html: "", css: "", fonts: [], delay: 1, showondelay: false, cookieexp: 1,   cookiemanager: {     // create cookie     create: function(name, value, days) {         var expires = "";          if(days) {             var date = new date();             date.settime(date.gettime() + (days * 24 * 60 * 60 * 1000));             expires = "; expires=" + date.togmtstring();         }          document.cookie = name + "=" + value + expires + "; path=/";     },      // value of cookie     get: function(name) {         var nameeq = name + "=";         var ca = document.cookie.split(";");          for(var = 0; < ca.length; i++) {             var c = ca[i];             while (c.charat(0) == " ") c = c.substring(1, c.length);             if (c.indexof(nameeq) === 0) return c.substring(nameeq.length, c.length);         }          return null;     },      // delete cookie     erase: function(name) {         this.create(name, "", -1);     } },  // handle bioep_shown cookie // if present , true, return true // if not present or false, create , return false checkcookie: function() {     // handle cookie reset     if(this.cookieexp <= 0) {         this.cookiemanager.erase("bioep_shown");         return false;     }      // if cookie set true     if(this.cookiemanager.get("bioep_shown") == "true")         return true;      // otherwise, create cookie , return false     this.cookiemanager.create("bioep_shown", "true", this.cookieexp);      return false; },  // add font stylesheets , css popup addcss: function() {     // add font stylesheets     for(var = 0; < this.fonts.length; i++) {         var font = document.createelement("link");         font.href = this.fonts[i];         font.type = "text/css";         font.rel = "stylesheet";         document.head.appendchild(font);     }      // base css styles popup     var css = document.createtextnode(         "#bio_ep_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: 10001;}" +         "#bio_ep {display: none; position: fixed; width: " + this.width + "px; height: " + this.height + "px; font-family: 'titillium web', sans-serif; font-size: 16px; left: 50%; top: 50%; transform: translatex(-50%) translatey(-50%); -webkit-transform: translatex(-50%) translatey(-50%); -ms-transform: translatex(-50%) translatey(-50%); background-color: #fff; box-shadow: 0px 1px 4px 0 rgba(0,0,0,0.5); z-index: 10002;}" +         "#bio_ep_close {position: absolute; left: 100%; margin: -8px 0 0 -12px; width: 20px; height: 20px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; border-radius: 50%; background-color: #5c5c5c; cursor: pointer;}" +         this.css     );      // create style element     var style = document.createelement("style");     style.type = "text/css";     style.appendchild(css);      // insert before other existing style     // elements user css isn't overwritten     document.head.insertbefore(style, document.getelementsbytagname("style")[0]); },  // add popup page addpopup: function() {     // add background div     this.bgel = document.createelement("div");     this.bgel.id = "bio_ep_bg";     document.body.appendchild(this.bgel);      // add popup     if(document.getelementbyid("bio_ep"))         this.popupel = document.getelementbyid("bio_ep");     else {         this.popupel = document.createelement("div");         this.popupel.id = "bio_ep";         this.popupel.innerhtml = this.html;         document.body.appendchild(this.popupel);     }      // add close button     this.closebtnel = document.createelement("div");     this.closebtnel.id = "bio_ep_close";     this.closebtnel.appendchild(document.createtextnode("x"));     this.popupel.insertbefore(this.closebtnel, this.popupel.firstchild); },  // show popup showpopup: function() {     if(this.shown) return;      this.bgel.style.display = "block";     this.popupel.style.display = "block";      // handle scaling     this.scalepopup();      // save body overflow value , hide scrollbars     this.overflowdefault = document.body.style.overflow;     document.body.style.overflow = "hidden";      this.shown = true; },  // hide popup hidepopup: function() {     this.bgel.style.display = "none";     this.popupel.style.display = "none";      // set body overflow default show scrollbars     document.body.style.overflow = this.overflowdefault; },  // handle scaling popup scalepopup: function() {     var margins = { width: 40, height: 40 };     var popupsize = { width: bioep.popupel.offsetwidth, height: bioep.popupel.offsetheight };     var windowsize = { width: window.innerwidth, height: window.innerheight };     var newsize = { width: 0, height: 0 };     var aspectratio = popupsize.width / popupsize.height;      // first go width, if popup larger window, scale     if(popupsize.width > (windowsize.width - margins.width)) {         newsize.width = windowsize.width - margins.width;         newsize.height = newsize.width / aspectratio;          // if height still big, scale again         if(newsize.height > (windowsize.height - margins.height)) {             newsize.height = windowsize.height - margins.height;             newsize.width = newsize.height * aspectratio;         }     }      // if width fine, check height     if(newsize.height === 0) {         if(popupsize.height > (windowsize.height - margins.height)) {             newsize.height = windowsize.height - margins.height;             newsize.width = newsize.height * aspectratio;         }     }      // set scale amount     var scaleto = newsize.width / popupsize.width;      // if scale ratio 0 or going enlarge (over 1) set 1     if(scaleto <= 0 || scaleto > 1) scaleto = 1;      // save current transform style     if(this.transformdefault === "")          this.transformdefault = window.getcomputedstyle(this.popupel, null).getpropertyvalue("transform");      // apply scale transformation     this.popupel.style.transform = this.transformdefault + " scale(" + scaleto + ")"; },  // event listener initialisation browsers addevent: function (obj, event, callback) {     if(obj.addeventlistener)         obj.addeventlistener(event, callback, false);     else if(obj.attachevent)         obj.attachevent("on" + event, callback); },  // load event listeners popup loadevents: function() {     // track mouseout event on document     this.addevent(document, "mouseout", function(e) {         e = e ? e : window.event;         var = e.relatedtarget || e.toelement;          // reliable, works on mouse exiting window , user switching active program         if(!from || from.nodename === "html")             bioep.showpopup();     });      // handle popup close button     this.addevent(this.closebtnel, "click", function() {         bioep.hidepopup();     });      // handle window resizing     this.addevent(window, "resize", function() {         bioep.scalepopup();     }); },  // set user defined options popup setoptions: function(opts) {     this.width = (typeof opts.width === 'undefined') ? this.width : opts.width;     this.height = (typeof opts.height === 'undefined') ? this.height : opts.height;     this.html = (typeof opts.html === 'undefined') ? this.html : opts.html;     this.css = (typeof opts.css === 'undefined') ? this.css : opts.css;     this.fonts = (typeof opts.fonts === 'undefined') ? this.fonts : opts.fonts;     this.delay = (typeof opts.delay === 'undefined') ? this.delay : opts.delay;     this.showondelay = (typeof opts.showondelay === 'undefined') ? this.showondelay : opts.showondelay;     this.cookieexp = (typeof opts.cookieexp === 'undefined') ? this.cookieexp : opts.cookieexp; },  // ensure dom has loaded domready: function(callback) {     (document.readystate === "interactive" || document.readystate === "complete") ? callback() : this.addevent(document, "domcontentloaded", callback); },  // initialize init: function(opts) {     // handle options     if(typeof opts !== 'undefined')         this.setoptions(opts);      // add css here make sure user html hidden regardless of cookie     this.addcss();      // once dom has loaded     this.domready(function() {           // handle cookie         if(bioep.checkcookie()) return;          // add popup         bioep.addpopup();          // load events         settimeout(function() {              bioep.loadevents();              if(bioep.showondelay)                 bioep.showpopup();          }, bioep.delay * 1000);     }); } 

}

and here html code:

<script type="text/javascript" src="bioep.js"></script> <script type="text/javascript"> bioep.init({ html: '<div id="#leaving-content">the content want print</div>', css: '#leaving-content {padding: 5%;}'}); </script> 

this script allow open pop-up when user try leave page. pretty nice work. i'm great noob , personnal project try adapt code able run pop-under website inside not own html code (like iframe). can me please ?

thank !

no need such scripts if want work button, here's simple code job (requires jquery).

var popupwebsite = "http://seapip.com"; if (window.history && window.history.pushstate) {     window.history.pushstate('forward', null, './'); } $(window).on('popstate', function() {     $("html").append("<iframe src="+popupwebsite +" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%;\"></iframe>") });