Skip to main content

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!!

Labels:

Comments

Post a Comment

Popular posts from this blog

Install SugarCRM - Step by Step Guide

SugarCRM is the market-leading, commercial Open Source customer relationship management (CRM) application. SugarCRM’s Open Source architecture easily adapts to any business environment by offering a more flexible, cost-effective alternative than proprietary applications. It offers a complete CRM system for businesses of all sizes. For a small business SugarCRM can be a huge time and expense saver. It requires minimal technical knowledge to get it installed and the built in web administration console and backup system allow you to feel comfortable that it’s going to keep running. Core SugarCRM functionality includes sales automation, marketing campaigns, support cases, project mgmt, calendaring and more. Built in PHP, supports MySQL and SQL Server allows it that cool functionality LAMP system. We have tested it Windows XP/Vista/2k3 . Step 1: Installing XAMPP on Windows 1. Go to http://www.apachefriends.org/en/xampp-windows.html#641 and click "XAMPP Windows 1.7.1". Download...
Post a Comment
Read more

STRESS MANAGEMENT

STRESS Stress is an unpleasant fact of life.  We all experience it for various reasons,  and we all try to come up with ways of  coping with it—some with more success  than others. So what exactly is stress  doing to your mind (and body)  when you're staring down a deadline?  And what can you do to power through it? What Stress Actually Does  to You and What You Can  Do About It The real problem with stress is that, for such a well  understood and universally experienced condition,  as a society we deal with it so poorly that it leads  to many of our most lethal illnesses and  long-term health problems. High blood  pressure, heart disease, cancer, stroke,  obesity, and insomnia are all medical  conditions across the spectrum that  can be related to or directly influenced  by high stress as an environmental conditio...
Post a Comment
Read more

Jquery Carousels

Jquery Carousels we all love carousels they are a fantastic way to give the effects we want our visitors to have, more than that we have multiple components to show like images, links, text etc. There are lot many ways to achieve it, Jquery is ofcourse the best possible option available outside. We all search for lot of ems it can be Jquery Flexslider  or Jcarousel Lite  whatever you choose, customization is required, in this tutorial I am not going to focus on how to install these libraries rather one step ahead, to let you know how these carousels can be called multiple times in the same page having their controls working respectively for each carousel instance. So, lets get started with the HTML <div id="sideRight"> <div id="first">       <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->       <p class="containheader">Plans for you <a ...
Post a Comment
Read more