How to show pop-up survey with Jquery when leaving page

Question

I want to show survey in pop-up window when users leaves page.

So I want to leave page only when he answers all the questions of survey and/or close the pop-up window... How can I do that?

I try this code

$(document).ready(function () {
        function exitpop() {
            my_window = window.open("http://www.google.com", "mywindow1", "status=off,toolbar=off,location=off,menubar=off,directories=off,resizable=off,scrollbars=off,height=800,width=800");
            });
        }
        $(window).unload(function () {
            exitpop();
        });
    });

But it blocks by majority of browsers and don't pause clicked action(going to other page or closing the window). What is the best way to do that?

Answer 1

Try Using window.onbeforeunload event ..

have an idea from the follow code snippet. i am using this type of code to confirm use to before leaving the page.. means either it is close tab or refresh the page...

But you have to track when it is refresh or close.. both means same to beforeunload.. you can't use directly use them either unload or beforeunload - they do not differ between window close, Try this may be it will work according to your requirements.

http://docs.jquery.com/Events/unload#fn

jQuery:

$(window).unload( function () { alert("Bye now!"); } );

or javascript:

window.onunload = function(){alert("Bye now!");}

For more information follow this: https://developer.mozilla.org/en/DOM/window.onclose

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function confirmBeforeUnload(e) {
        var e = e || window.event;

        // For IE and Firefox
        if (e) {
            e.returnValue = 'Any string';
        }

        // For Safari
        return 'Any string';

    }
    function goodbye(e) {
        if (!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
    window.onbeforeunload = goodbye;
    </script>
    <title>Untitled Document</title>
    </head>

    <body>
    </body>
    </html>

open survey content in modal for interaction... follow these links to create modal popup on your page ..

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial -- follow this step by step tutorial with code to create modal popup..

Answer 2

Is it necessary to make users fill out a survey? If not, then you could replace the contents of the body so the user sees it in the background.

var done = 0;
window.onbeforeunload = function() {
  if (done != 1) {
    done = 1;
    document.getElementsByTagName('body')[0].innerHTML = "new content goes here";
    return "Howdy there. Why don't you stick around for a moment and take our survey?";
  }
}

How to show pop-up survey with Jquery when leaving page

Question

2 answers

solution1
3 ACCPTED 2011-11-14 08:08:26

solution2
0 2014-11-03 00:34:15

How to show pop-up survey with Jquery when leaving page

Question

2 answers

solution1 3 ACCPTED 2011-11-14 08:08:26

solution2 0 2014-11-03 00:34:15

solution1
3 ACCPTED 2011-11-14 08:08:26

solution2
0 2014-11-03 00:34:15