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 element in web page until it's disabled.

How can I accomplish this?

A layer on top. Example : http://fczaja.blogspot.in/2009/02/disable-all-page-elements-with.html — TJ-, May 07 '12 at 05:52

score 17 · Answer 1 · edited May 07 '12 at 08:47

17

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.

edited May 07 '12 at 08:47

brianff

175
7

answered May 07 '12 at 05:53

KBN

2,915
16
27

2

But this doesn't block keyboard. You can still Tab & Enter to get button clicked. – RnMss Apr 26 '18 at 17:11

score 8 · Answer 2 · answered May 07 '12 at 05:58

8

You may use jQuery BlockUI Plugin.

It is simple.

answered May 07 '12 at 05:58

Alfred

21,058
61
167
249

score 4 · Answer 3 · answered Nov 04 '13 at 11:09

There are may ways to achieve this.. but the simplest one which i came across is to use div tag to cover the page and then remove it when event is complete

$('body').append('<div id="over" style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

This will add a div tag to whole body.At the end of function include this

$("#over").remove();

score 2 · Answer 4 · answered May 07 '12 at 05:51

2

If you can use JQuery, and need some user input on top the gray area, try JQUery UI Dialog, and set it as modal

answered May 07 '12 at 05:51

Eran Medan

44,555
61
184
276

score 2 · Answer 5 · answered May 07 '12 at 05:53

The basic technique for this is to add a 100% width and height div on top of everything.

$('body').append('<div class="cover"/>').css({
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: '999'
});

Then make your modal window z-index: 1000.

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

5 Answers5

Linked