Monday, 2 February 2009

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;

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.