javascript div mask layer blocks the entire page_javascript skills-JS Tutorial-php.cn

javascript div mask layer blocks the entire page_javascript skills

WBOY

Release： 2016-05-16 18:50:16

Original

1675 people have browsed it

The specific solutions are as follows:
1. Differences in the clientHeight, offsetHeight, and scrollHeight attributes of the document.body object under IE and FF.
clientHeight
Under IE and FF, there is no difference in this attribute. They both refer to the visible area of the browser, that is, the height of the remaining page display space after excluding the browser's toolbar status bar.
offsetHeight
Under IE, offsetHeight is also the height of the browser's visible area (including edges)
Under FF, offsetHeight is the height of the specific content of the page
scrollHeight
Under IE, scrollHeight It is the height of the specific content of the page, which can be less than clientHeight
Under FF, scrollHeight is the height of the web page content, but the minimum value is clientHeight
2. The following is a cross-browser solution to obtain the height of the current page.

Copy code The code is as follows:

function getPageSize() 
{ 
var body = document.documentElement; 
var bodyOffsetWidth = 0; 
var bodyOffsetHeight = 0; 
var bodyScrollWidth = 0; 
var bodyScrollHeight = 0; 
var pageDimensions = [0, 0]; 
pageDimensions[0]=body.clientHeight; 
pageDimensions[1]=body.clientWidth; 
bodyOffsetWidth=body.offsetWidth; 
bodyOffsetHeight=body.offsetHeight; 
bodyScrollWidth= body.scrollWidth; 
bodyScrollHeight=body.scrollHeight; 
if(bodyOffsetHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyOffsetHeight; 
} 
if(bodyOffsetWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyOffsetWidth; 
} 
if(bodyScrollHeight > pageDimensions[0]) 
{ 
pageDimensions[0]= bodyScrollHeight; 
} 
if(bodyScrollWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyScrollWidth; 
} 
return pageDimensions; 
} 
 

3. A div must be placed on the page as a mask layer. The following is the css style of this mask layer.

Copy code The code is as follows:

.lockDiv 
{ 
 position:absolute; 
left:0; 
top:0; 
height:0; 
width:0; 
border:2 solid red; 
display:none; 
text-align:center; 
background-color:#DBDBDB; 
filter:Alpha(opacity=60); 
} 

4. On the client Use the javascript below to enclose the entire page with a mask layer.

Copy code The code is as follows:

var sandglassSpan = 1; 
var timeHdl; 
function DisablePage() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl ); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass .style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
ctrlSandglass.style.display = "block"; 
timeHdl = window.setTimeout(DisablePage,200) ; 
} 
} 

5. If the ASP.net Validator control is used on the page, the following javascript should be used.

Copy code The code is as follows:

var sandglassSpan = 1; 
var timeHdl; 
function DisablePageHaveValidator() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(false == Page_IsValid) 
{ 
sandglassSpan = 0; 
} 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
ctrlSandglass.style.display = "block "; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
timeHdl = window.setTimeout(DisablePageHaveValidator, 200); 
} 
} 

6. DisablePage and DisablePageHaveValidator This method can be called in the button's onclick event or at other times.