Monday 2 February 2009

Disable all page elements with transparent div

Sometimes you want to disable all page elements at one time. There are many ways to achieve that. I'm using an additional div displayed on the top layer of the page. It covers the whole page content and makes clicking elements on lower layers impossible. The div can be totally transparent so the user still sees the content of the lower layers.

First, you need to place the additional div on your page, right behind the <body> tag:
...
</head>
<body>
<div id="disablingDiv" ></div>
...
Then, you need to create appropriate style for that div. This element needs to be displayed on the top layer:

#disablingDiv
{
/* Do not display it on entry */
display: none;

/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;

/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;

/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
Now it is ready to use but not displayed. If you want to enable the div (to disable all underlaying page elements) just invoke the following JS code:

document.getElementById('disablingDiv').style.display='block';
To disable it again:
   document.getElementById('disablingDiv').style.display='none';
You can also play with background color and opacity to create different effects. The div itself can contain some additional elements e.g. button allowing enabling, pictures, etc.
I've created this simple style basing on more complex example of lightbox described here.

8 comments:

Anonymous said...

VERY NEAT WAY TO DISABLE I LOVED THIS CONCEPT

REGARDS,
DINESH

Anonymous said...

Not working over combobox and if page is having scroll it is showing till the initial height.

Uday said...

Excellent solution, explained very well. This is exactly what I was looking for.

Thanks for sharing this trick.

Anonymous said...

"if page is having scroll it is showing till the initial height"

You can set the desired width and height via Javascript before showing the div.

var min_w = 960;
var h = document.body.offsetHeight;
var w = document.body.offsetWidth;
w = w < min_w ? min_w : w;
document.getElementById('disablingDiv').style.height = h+"px";
document.getElementById('disablingDiv').style.width = w+"px";
document.getElementById('disablingDiv').style.display = 'block';

Sara said...

Thank you so much
You're a star
xxxxxxxxxxx

יאיר בן-מאיר said...

Thanks!

Deepal said...

This was very useful. Thanks. Keep up the good work.

Unknown said...

Nice post... But here position should be fixed instead of absolute to cover full page.