How can I disable an entire HTML page on an event like in the case of JavaScript alert?

css, jquery

Solution

CSS:

#cover {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.80;
   background: #aaa;
   z-index: 10;
   display: none;
}

HTML :

<body>
<div id="wrap">
 // your normal contents here
</div>
<div id="cover"> </div>
</body>

jquery :

//trigger on whatever event required.
$("#cover").fadeIn(100);
alert("something");
$("#cover").fadeOut(100); //after done.

Problem

I am developing a web page in JSP/HTML in which I have to disable/ 'gray screen' an entire web page on a button click event so that an end user can't access the other element in web page until it's disabled. How can I accomplish this?

Original source