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

Question

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 ele

Answer 1

CSS:

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

HTML :

 // your normal contents here

 

jquery :

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