Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

css

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?

like image 288
Tokendra Kumar Sahu Avatar asked May 07 '12 05:05

Tokendra Kumar Sahu


2 Answers

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.
like image 50
KBN Avatar answered Nov 15 '22 10:11

KBN


You may use jQuery BlockUI Plugin.

It is simple.

like image 28
Alfred Avatar answered Nov 15 '22 09:11

Alfred