I have a webpage with JavaScript and jQuery.  It initializes some global variables, and runs a (document).ready routine. 

But I also have a button on the page, that when it is clicked, causes a DIV to appear that covers the page.  The DIV's CSS class is:

 .overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
     min-height:100%;
    z-index:1000;
    display:none;
  }

Note that normally it is invisible, because the display is set to NONE, and also note that it has a high "z-index", which means that when I call the jQuery .SHOW() method, and it becomes visible, it will be on top of everything else.  It also covers the entire browser, because the width and height are at 100%.

So here is the problem.  Suppose my page has a global variable called "MyVariable".  I initialize it to zero.  Then other code runs as the user uses the page, and the global variable ends up with a value of 1409.

Now the user clicks the button that makes the DIV visible (the button calls the jQuery SHOW method).  I find that after the DIV is hidden again (by the HIDE method), its as if the entire page has been refreshed.  "MyVariable" is back at zero, and the (document).ready routine is run all over again.

Is there any way around this?  (I was using IE).  Is there any way to show a div that covers everything, without losing all the settings?

Thanks.