Question

I’m trying to launch a popup from certain pages. I want users to see the popup only when:

a) they close the browser tab
b) they hit the browser’s Back button
c) they go to a page other than the next step in the purchase path – basically, when they go to any URL that does not contain the string “/checkout/”.

I’ve looked at popup examples that load body onUnload, and that’s a bit too global. I just want a popup – a true actual popup – to launch if they try to leave the checkout path.

I’ve looked at several questions on StackOverflow, but none of them quite seem to answer my question. The onBeforeUnload mentioned in this answer https://stackoverflow.com/a/3753963/1634459 might work…MIGHT…but I’m not totally sure how to implement it with the conditions I listed above.

…help?

Here’s the popup window code I’d like to use:

<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="center"){LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:50;TopPosition=(screen.availHeight)?(screen.availHeight-h)/2:50;}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}
function CloseNewWin(){if(win!=null && win.open)win.close()}
window.onfocus=CloseNewWin;
</script>

Answer 1

Here you go; I wrote this for the marketing team at a previous job. You should be able to adapt it pretty easily; just update the URL and params as appropriate.

This code will open a popup when the user leaves the page, unless they leave by submitting the checkout form. (If you have more than one form on the page, which you shouldn’t in a checkout flow, you will need to fix that as well.)

var nag = function () {

    return {
        // assume the user is going to leave, get ready to pounce!
        doWant: true,

        // FALCON PUNCH
        deploy: function () {
            if (nag.doWant) {

                var width = 449;
                var height = 298;

                args = "width=" + width + ",";
                args += "height=" + height + ",";
                args += "location=0" + ","
                args += "menubar=0" + ","
                args += "resizable=1" + ","
                args += "scrollbars=0" + ","
                args += "status=0" + ","
                args += "titlebar=0" + ","
                args += "toolbar=0" + ","
                args += "hotkeys=0"

                var demo_window = window.open("YOUR_URL", "main", args);

                try {
                    demo_window.focus();
                } catch (err3) { };
            }
        },

        // oh, off to step 2? that's cool. carry on.
        ignore: function () {
            nag.doWant = false;
        }
    }
} ();

window.onunload = nag.deploy;
document.forms[0].onsubmit = nag.ignore;

If you want to be able to STOP the user from leaving the page, I can help you with that update.