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?
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.
You may use jQuery BlockUI Plugin.
It is simple.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With