브라우저 창에 마스크 레이어를 추가하는 방법_기본지식

브라우저 창에 마스크 레이어를 추가하는 방법

배경
web2.0에서 페이지 팝업은 매우 일반적인 상호 작용 방법이므로 불필요한 페이지 이동을 피할 수도 있습니다. 인터페이스의 레이아웃과 상호작용성을 개선합니다.
그러나 브라우저의 기본 팝업 기능(경고, 확인, 프롬프트)은 디스플레이 UI가 아름답지 않고 유연성이 부족하기 때문에 큰 제한이 있습니다. 따라서 팝업 기능을 정의해야 하는 경우가 많습니다.
모달 팝업 창을 구현하려는 경우(모달 팝업 창은 팝업 창이 나타날 때 페이지의 다른 부분을 클릭할 수 없음을 의미함) 일반적인 접근 방식은 div를 사용하여 차단하는 것입니다. 전체 페이지 창.
구현
아래에서는 보다 간단하고 효과적인 마스크 레이어를 단계별로 구현합니다.

1단계:
먼저 고려해야 할 사항 브라우저 창을 차단하는 div를 정의하려면 다음 HTML CSS 코드를 고려하세요.

브라우저를 차단할 수 있는 기능 창에서 주의가 필요한 여러 CSS 속성은 다음과 같이 설명됩니다.
1) background:#000: div의 배경색을 검은색으로 설정합니다. filter:alpha(opacity=10): IE에서 div를 설정합니다. div의 투명도는 0.1로 설정됩니다. 불투명도:.1: IE가 아닌 경우 div의 투명도를 0.1로 설정합니다.
위의 세 가지 속성은 나머지 속성의 "방해되지만 표시되는" 효과를 얻기 위해 결합됩니다. 페이지 요소.
2)left:0px;top:0px;position:fixed;height:100%;width:100%: div의 높이와 너비를 각각 브라우저 높이와 너비의 100%로 정의합니다. 여기에 약간의 트릭이 있습니다. div의 위치가 고정 또는 절대인 경우 div의 높이가 백분율(예: 100%)로 설정되면 div의 높이가 높이를 참조하여 계산됩니다. 브라우저의 뷰포트. 또한 위치를 고정으로 설정하면 브라우저가 스크롤하거나 크기를 조정하는 경우에도 마스크 레이어가 항상 페이지의 표시 영역을 차단하도록 할 수 있습니다.
3)overflow:hidden은 스크롤 막대가 나타나는 것을 방지하는 데 사용됩니다.

2단계:
주의깊은 독자라면 위의 CSS 코드가 IE 6에 적용되지 않는다는 것을 알 수 있을 것입니다. 두 가지 이유가 있습니다. 첫째, IE6은 위치를 지원하지 않습니다. 두 번째로 더 중요한 점은 IE 6에서는 height:100%가 작동하지 않으며 div의 높이가 더 이상 브라우저의 표시 영역 높이를 나타내지 않는다는 것입니다.
첫 번째 결함을 수정하는 것은 쉽습니다. CSS 해킹을 사용하고 _position:absolute를 추가하면 됩니다.
두 번째 결함을 수정하려면 자바스크립트를 사용하여 마스크 레이어의 높이와 너비를 동적으로 계산해야 합니다. 특히 주의할 점은 페이지를 스크롤할 때 마스크 레이어도 창을 덮도록 하기 위한 것입니다. 마스크 레이어의 너비는 스크롤 영역을 덮어야 합니다.
동적 계산을 위한 코드는 다음과 같습니다. 여기서 마스크 변수는 마스크 레이어를 가리킵니다.

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

functioncalculateSize() {
var b = document.documentElement.clientHeight ? document.documentElement : document.body,
height = b.scrollHeight > .clientHeight ? b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.clientWidth : b.clientWidth;
mask.css({height: height, width: width}) ;
}

또한 페이지 크기가 변경되면 마스크 레이어의 높이와 너비를 다시 계산해야 한다는 점도 중요합니다. 그렇지 않으면 새로 확장된 영역이 확장되지 않을 수 있습니다. 가면을 쓴.

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

function resize() {
calculateSize ();
$(window).on(“resize”,calculateSize);
}

3단계:
1단계 및 2, 기본적으로 마스크 레이어 구축이 완료되었습니다. 그러나 작업은 완료되지 않았습니다. IE6에서는 몇 가지 특별한 상황을 고려해야 합니다. 페이지에 선택 요소가 있는 경우 마스크 레이어가 선택 요소를 덮을 수 없습니다. 이는 IE 6의 유명한 버그입니다. 해결 방법은 마스크 레이어에 iframe 추가에 있습니다.
HTML CSS 코드는 다음과 같습니다.

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

약간의 설명이 필요한 몇 가지 팁이 있습니다.
1) iframe의 스타일은 width:100%;height:100%;를 사용하는데, 이는 상위 위치 때문에 가능합니다. 요소 높이와 너비가 결정되었습니다
2) 마스크 레이어 내부에는 iframe 외에 div가 추가되고 div와 iframe의 위치는 절대값이며 div의 z-index가 더 큽니다. iframe의 z-index보다 내부 div가 iframe을 차단합니다. 이는 실질적인 의미를 갖습니다. 페이지의 일부 이벤트(예: onclick, onmouseup, onmousemove)는 iframe에서 가로채는 대신 이 페이지에서 계속 응답합니다.
코드 예시
위 분석을 바탕으로 전체 구현 코드는 다음과 같으니 참고하시면 됩니다.

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

var windowMask = (function($) {

var isIE6 = $.browser.msie && $.browser.version == "6.0";
var 마스크 = '

';

isIE6 &&(마스크 = '< ;div unselectable="on" style="display:none; background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height :100%;너비:100 %;오버플로:hidden;z-index:10000;">

');

mask = $(mask);
$("body" ).append(mask);

function show() {
isIE6 && resize()
mask.show()

function hide() {
isIE6 && $ (window).off("resize",calculateSize);
mask.hide()
}

functioncalculateSize() {
var b = document.documentElement.clientHeight ? document .documentElement : document.body,
height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.scrollWidth : b.clientWidth ;

mask.css({높이: 높이, 너비: 너비})
}

function resize() {
calculateSize() ;
$(window ).on("resize",calculateSize);

return {
표시: 표시,
숨기기
}; >})();


마스크 레이어를 표시해야 할 경우 windowMask.show()를 호출하면 됩니다. 마스크 레이어를 제거하려면 windowMask를 호출하세요. 숨다().