Solved

Confirmation on window close

Posted on 2010-08-22
6
665 Views
Last Modified: 2012-06-21
Hi!

I have to show a confirmation dialog to user when he tries to close the window.
The user could navigate to others pages, the message should appears only in closing windows (or tab).

I tried this but it's alerts in navigation too:

<script language="javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
	return " Are you sure you want to exit this page?";
}
</script>

Open in new window


How can I alert the user only when he tries to close the window (or tab)?

Thanks in advance!
0
Comment
Question by:calypsoworld
6 Comments
 
LVL 3

Expert Comment

by:grantunwin
ID: 33496492

function showUnloading(evt){
evt.returnValue = "You are leaving.";
if (!confirm('Are you sure?'))
{
evt.preventDefault;
evt.stopPropagation; // this makes sure it does not bubble up
}

}
</script>

<body onbeforeunload="showUnloading(event); >
</body>

Open in new window

0
 
LVL 8

Expert Comment

by:Fareed Ali Khan
ID: 33496624
Hi,

I don't think you can stop the browser closing through JavaScript. Because of its different scenarios e.g. will it confirm from me when i end task the browser instance from task manager?

onBeforeunload event is called even on page refresh or the postback completes.

But you can show the dialog to user about browser is closing or perform some function calls at the time of browser is closing.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33497371
About the best one could hope for is to rely upon a global var - call it OK - and set it's initial value to TRUE.

In your navigation functions, set OK to FALSE. Then in your "onbeforeunload" function, test OK. If it is false, then you are in charge of navigation, so do not display the alert. If it is TRUE, then the user is in charge, and the alert should be shown.
<script type="text/javascript">

var OK = true;

function showUnloading(e){
    if (OK) {
        e.returnValue = "You are leaving.";
        
        if (!confirm('Are you sure?')) {
            e.preventDefault;
            e.stopPropagation; // this makes sure it does not bubble up
        }
    }
}

window.onbeforeload = showUnloading;
</script>

Open in new window

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 33497376
A slight change:


<script type="text/javascript">

var OK = true;

function showUnloading(e){
    if (OK) {
        e.returnValue = "You are leaving.";
        
        if (!confirm('Are you sure?')) {
            e.preventDefault;
            e.stopPropagation; // this makes sure it does not bubble up
        }
    }
    return false;
}

window.onbeforeload = showUnloading;
</script>

Open in new window

0
 

Author Closing Comment

by:calypsoworld
ID: 33500193
Thank you very much!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33500228
No worries - glad to help.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now