First, you need to place the additional div on your page, right behind the
...Then, you need to create appropriate style for that div. This element needs to be displayed on the top layer:
<div id="disablingDiv" ></div>
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:
/* Do not display it on entry */
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
/* make it cover the whole screen */
/* make it white but fully transparent */
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.