CODEWITHSUNDEEP
javascripthtml
user1349661
user1349661

Reputation:

Confirmation before closing of tab/browser

How to ask confirmation from user before he leaves the page as in gmail?

I searched for this question in various places, but all that they mention is the use of javascript window.unload & window.onbeforeunload. Also it doesn't work in chrome most of the times as it gets blocked.

Upvotes: 117

Views: 202764

Answers (8)

Soumyajit Giri
Soumyajit Giri

Reputation: 5

// use jquery version older than 1.6
var preventUnloadPrompt;
var messageBeforeUnload =
  'my message here - Are you sure you want to leave this page?';
$('a').live('click', function () {
  preventUnloadPrompt = true;
});
$('form').live('submit', function () {
  preventUnloadPrompt = true;
});

$(window).bind('beforeunload', function (e) {
  var rval;
  if (preventUnloadPrompt) {
    return;
  } else {
    return messageBeforeUnload;
  }

  return rval;
});

Upvotes: -3

khan ss
khan ss

Reputation: 1

  1. Let say i want to close a window if nothing is selected
  2. I want to close window with something selected but don't prompt me.
  3. I want to close a window but something is selected prompt me plz.

For these three conditions I have searched a lot in the following code made changes suit my needs hope help someone else. ask is a key if I want to pop up the prompt 'true' will prompt you for close window other wise not. Suppose I want to print my document and redirect my page the ask will be false and there will be no prompt. Suppose your page having data then check a condition is my case a value subtotal if subtotal is zero then no prompt other wise prompt me that you have something in your page.

<pre>
    var ask = true;
    window.onbeforeunload = function(e) {
       if (!ask) return null
       var subtotal = $('#lblgtwithsgst').text();
         if (subtotal != '0') {
          e = e || window.event;
          //old browsers
            if (e) {
             e.returnValue = 'Sure?';
            }
            //safari, chrome(chrome ignores text)
            return 'Sure?';
         }  
      }
      $('#btnPrint').click(function(){
        ask = false;
        ///print your doc no prompt if ask is false;
      )};

Upvotes: 0

Konstantin Smolyanin
Konstantin Smolyanin

Reputation: 19105

The shortest solution for the year 2020 (for those happy people who don't need to support IE)

Tested in Chrome, Firefox, Safari.

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

Actually no one modern browser (Chrome, Firefox, Safari) displays the "return value" as a question to user. Instead they show their own confirmation text (it depends on browser). But we still need to return some (even empty) string to trigger that confirmation on Chrome.

More explanations see on MDN here and here.

Upvotes: 20

yaya
yaya

Reputation: 8273

If you want to ask based on condition:

var ask = true
window.onbeforeunload = function (e) {
    if(!ask) return null
    e = e || window.event;
    //old browsers
    if (e) {e.returnValue = 'Sure?';}
    //safari, chrome(chrome ignores text)
    return 'Sure?';
};

Upvotes: 3

Dev Matee
Dev Matee

Reputation: 5947

Simply

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;

Upvotes: 7

Musaddiq Khan
Musaddiq Khan

Reputation: 1937

I read comments on answer set as Okay. Most of the user are asking that the button and some links click should be allowed. Here one more line is added to the existing code that will work.

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {

      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

Call unhook() onClick for button and links which you want to allow. E.g.

<a href="#" onClick="unhook()">This link will allow navigation</a>

Upvotes: 8

Claudia L
Claudia L

Reputation: 291

Try this:

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

more info here MDN.

Upvotes: 15

gopi1410
gopi1410

Reputation: 6625

Try this:

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

Here is a working jsFiddle

Upvotes: 154

Related Questions