First, you need to place the additional div on your page, right behind the
<body> tag:...Then, you need to create appropriate style for that div. This element needs to be displayed on the top layer:
</head>
<body>
<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:
#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);
}
To disable it again:
document.getElementById('disablingDiv').style.display='block';
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:
VERY NEAT WAY TO DISABLE I LOVED THIS CONCEPT
REGARDS,
DINESH
Not working over combobox and if page is having scroll it is showing till the initial height.
Excellent solution, explained very well. This is exactly what I was looking for.
Thanks for sharing this trick.
"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';
Thank you so much
You're a star
xxxxxxxxxxx
Thanks!
This was very useful. Thanks. Keep up the good work.
Nice post... But here position should be fixed instead of absolute to cover full page.
Post a Comment