> 웹 프론트엔드 > JS 튜토리얼 > javascript div 마스크 레이어는 전체 page_javascript 기술을 차단합니다.

javascript div 마스크 레이어는 전체 page_javascript 기술을 차단합니다.

WBOY
풀어 주다: 2016-05-16 18:50:16
원래의
1690명이 탐색했습니다.

구체적인 해결 방법은 다음과 같습니다.
1. IE 및 FF에서 document.body 개체의 clientHeight, offsetHeight 및 scrollHeight 속성의 차이점.
clientHeight
IE와 FF에서 이 속성은 둘 다 브라우저의 가시 영역, 즉 클라이언트를 제외한 나머지 페이지 표시 공간의 높이를 나타냅니다. 브라우저의 도구 모음 상태 표시줄.
offsetHeight
IE에서 offsetHeight는 브라우저의 가시 영역(가장자리 포함)의 높이이기도 합니다.
FF에서 offsetHeight는 IE에서
scrollHeight
페이지의 특정 콘텐츠 높이입니다. , scrollHeight 페이지의 특정 콘텐츠의 높이이며 clientHeight
FF에서 scrollHeight는 웹 페이지 콘텐츠의 높이이지만 최소값은 clientHeight
2입니다. 다음은 현재 페이지의 높이를 얻는 크로스 브라우저 솔루션입니다.

코드 복사 코드는 다음과 같습니다.

function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyScrollHeight = 0; [0, 0];
pageDimensions[0]=body.clientHeight;
bodyOffsetWidth=body.offsetWidth;
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. div는 마스크 레이어로 페이지에 배치되어야 합니다. 다음은 이 마스크 레이어의 CSS 스타일입니다.





코드 복사

코드는 다음과 같습니다.
.lockDiv { 위치:절대; 왼쪽:0; 높이:0 경계:2 빨간색; ; 텍스트 정렬:센터;
배경색:#DBDBDB;
필터:알파(불투명도=60)
}


4. 클라이언트에서 아래 자바스크립트를 사용하여 전체 페이지를 마스크 레이어로 묶습니다.





코드 복사


코드는 다음과 같습니다.

var sandglassSpan = 1; 🎜>var timeHdl; function DisablePage() {
var ctrlSandglass = document.getElementById("divSandglass") {
document.body.style.cursor = '대기';
var pageDimensions = getPageSize()
ctrlSandglass.style.top = 0
ctrlSandglass.style.left; 🎜>ctrlSandglass .style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block"
timeHdl = window.setTimeout(DisablePage ,200) ;
}
}



5. 페이지에서 ASP.net Validator 컨트롤을 사용하는 경우 다음 자바스크립트를 사용해야 합니다.





코드 복사


코드는 다음과 같습니다.


var sandglassSpan = 1; 🎜>var timeHdl;
function 비활성화PageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass") if(false == Page_IsValid) {
sandglassSpan = 0;
} if(sandglassSpan==0) { window.clearTimeout(timeHdl) ctrlSandglass.style.display = document.body. style.cursor = 'auto'; sandglassSpan = 1;
}
else
{
document.body.style.cursor = '대기'
ctrlSandglass.style.display = "블록";
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.height = pageDimensions[0] ;
ctrlSandglass.style.width = pageDimensions[1];
timeHdl = window.setTimeout(DisablePageHaveValidator, 200)
}
}


6. 비활성화PageHaveValidator 이 메서드는 버튼의 onclick 이벤트나 다른 시간에 호출될 수 있습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿