How to disable/enable an entire html page

[zakjs]

I am trying to create a page that has a link or button that once you click it, a table or div will appear and all other parts of the page will be disabled except for the newly appeared table. An example of that is google.com/ig “Edit this tab” link. I have tried in vain to decipher Google’s code. If any of you know how to do it, please send me the code. I appreciate you help.

[epots9]

the trick is done by changing the z-index of divs, good luck

[acoder]

Create a div and make it 100% in height and width. I'm assuming you want to create some form of pseudo-modality in your application.

[JamieHowarth0]

I am trying to create a page that has a link or button that once you click it, a table or div will appear and all other parts of the page will be disabled except for the newly appeared table. An example of that is google.com/ig “Edit this tab” link. I have tried in vain to decipher Google’s code. If any of you know how to do it, please send me the code. I appreciate you help.

Hi zak,

<script type="text/javascript">
<!--
function disablePage() {
document.getElementById('myFreezeDiv').style.width="100%";
document.getElementById('myFreezeDiv').style.height="100%";
document.getElementById('myFreezeDiv').style.visibility="visible";
document.getElementById('myFreezeDiv').style.position="fixed";
document.getElementById('myFreezeDiv').style.zIndex="99";
document.getElementById('myFreezeDiv').style.top="0px";
document.getElementById('myFreezeDiv').style.left="0px";
for (i=0;i<document.forms[0].length;i++) {
   document.forms[0].elements.[i].disabled="disabled";
}
 
myLinks = document.getElementsByTagName("a");
for (j=0;j<myLinks.length;j++) {
   myLinks[j].href="";
}
//--></script>
 

This code will:

1. set the DIV to be overlayed above all other elements;
2. set the DIV to be positioned to fill your browser screen;
3. disable all form elements within your primary form on your page;
4. disable all links on your page.

Hope it helps,

medicineworker

[peroo]

Hi!

You can "disable" the entire html page with this code:

var blurDiv = document.createElement("div");
blurDiv.id = "blurDiv";
blurDiv.style.cssText = "position:absolute; top:0; right:0; width:" + screen.width + "px; height:" + screen.height + "px; background-color: #000000; opacity:0.5; filter:alpha(opacity=50)";
 
document.getElementsByTagName("body")[0].appendChild(blurDiv);

and re-enable by remove the blurDiv element:

var blurDiv = document.getElementById("blurDiv");
blurDiv.parentNode.removeChild(blurDiv);

[Dean]

I think you are trying to make this thing far too complicated. All I did was create three separate divs. One to hold a simple message telling the user to wait; One to hold all the fields of the page; and one to hold the buttons to submit or cancel. The 'wait' div has 'style="display:none". When a button is clicked (OnClientClick="return ShowWaitDiv('cancel');" and OnClientClick="return Validate('save');") the show function simple sets the divs:

function ShowWaitDiv(saveorcancel) {
var div = document.getElementById(divWait.id);
div.style.display = "block";
var div1 = document.getElementById(divMain.id);
div1.style.display = "none";
var div2 = document.getElementById(divBut.id);
div2.style.display = "none";
if (saveorcancel == 'save') {
document.getElementById('<%= lblSaveorCancel.ClientID %>').innerHTML = 'Saving data, please wait...';
}
else {
document.getElementById('<%= lblSaveorCancel.ClientID %>').innerHTML = 'Redirecting, please wait...';
}
return true;
}

Simple solution and very easy to implement.