Modal window with browser close event

Prompt a window at the time of logout

You can download the complete Project from here

We all come across scenarios where a modal window needs to be popped up at the event of logout, you can do a simple alert box, confirm box or stylish jquery plugins available on the internet.

For this tutorial I am referring to a superb simple light weight jquery modal window by Eric Martin, I do not own this library, I have just implemented it and other add on utilities.

Lets get started, so requirements:
1) User should see a light box modal window at the time of logout.
2) The pop up window should have a confirmation box stating yes or no.
3) Click No and window should remain intact.
4) Click yes, background operations, server calls, document write etc.

If log out operation is not performed, user while navigating away from the current window should be prompted, like "do you want to navigate away from this window or stay on this window"
.
Catch: pressing f5 does not trigger this navigation away(handled in the javascript shown below), once the user clicked on yes logout, again the navigation event is unbinded.

To install the Jquery modal window plugin you can refer to the plugin and license below.

/*
 * SimpleModal 1.4.1 - jQuery Plugin
 * http://www.ericmmartin.com/projects/simplemodal/
 * Copyright (c) 2010 Eric Martin (http://twitter.com/ericmmartin)
 * Dual licensed under the MIT and GPL licenses
 * Revision: $Id: jquery.simplemodal.js 261 2010-11-05 21:16:20Z emartin24 $
 */


Javascript for the browser close, preventing browser to get closed, triggering the modal window is shown below or alternatively you can download the complete package from Google Project Hosting




 function setConfirmUnload(on) {
    
    window.onbeforeunload = (on) ? unloadMessage : null;
    }


function unloadMessage() {
    return 'This page is very critical to track the usage, navigating away may incur charges...'; 
      }




function closeWindow() {
    //Mozilla Fix
    if (window.netscape)
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
    window.open('','_self');
    window.close();
}


jQuery(function ($) {


$('#basic-modal .basic').click(function (e) {
  
$('#basic-modal-content').modal({
    containerCss:
    { maxHeight: 250
    } ,
    
    onOpen: function (dialog) 
    {
         dialog.overlay.fadeIn('slow', function () {
        dialog.container.slideDown('slow', function () {
        dialog.data.fadeIn('slow')
      ;});});
    },
    
    onClose: function (dialog) 
    {
  dialog.data.fadeOut('slow', function () {
 dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
$.modal.close();
});
;});});
    }
    
    });
return false;
});
  
  
  
  $('#logouttrue').click(function (e) {
     setConfirmUnload(false);
$('#content').html("You are done now, you can <a href='#' id='noclose' onclick='javascript:closeWindow();'>Close it..</a>");
    
});
  
  setConfirmUnload(true);
              
});
//keydown works with Chrome and IE
$(document).keydown(function(event){
      //alert(event.keyCode);
     if(event.keyCode == 116)
     setConfirmUnload(false);
      });



Again I would like to thank all the guys who post such great plugins and codes.

Happy Coding!!