간단한 전체 화면 투명 마스크(lightBox)

저자：Eve Cole 업데이트 시간：2010-06-09 17:08:28

얼마 전 졸업을 앞둔 한 네티즌이 나에게 이메일을 보냈다. 그의 졸업 프로젝트는 잠금 화면 효과를 구현해야 하는데, 이전에 게시한 대화 상자의 소스 코드를 이해할 수 없느냐고 물었다. 잠금화면 관련 코드는 이틀 후에 올리겠다고 했는데요. 요즘 너무 바빠서 이제서야 생각났는데, 이 글을 쓰기에 너무 늦지 않았으면 좋겠습니다.

요점을 말하자면:

요즘에는 web2.0 웹사이트에서 전체 화면 반투명 마스크 레이어가 널리 사용됩니다. 대부분의 마스크는 페이지 크기를 계산한 다음 Tencent qzone 및 wordpress 백엔드와 같이 페이지와 동일한 크기의 레이어로 덮는 방식으로 구현됩니다. . 이 방법은 이해할 수 있지만 페이지가 매우 길면 IE8에서는 실패합니다. (외국 정보의 설명은 기계의 그래픽 카드와 관련이 있다고 합니다.) 완벽한 플롯을 가진 일부 학생들은 이 문제에 직면한 후 절망에 빠졌습니다. , 심지어 나는 IE8이 그의 작업을 구문 분석하기 위해 IE7의 방법을 사용하도록 강요하기를 원합니다. 실제로 더 좋은 방법이 있습니다. CSS를 사용하여 해결해 보겠습니다.

" position:fixed "를 기억하시나요? CSS2의 새로운 속성으로, 스크롤 바를 드래그할 때 요소가 페이지에 고정되어 움직이지 않게 할 수 있습니다. 예를 들어 Qzone 상단의 고정 네비게이션 바는 이렇게 구현됩니다. 마찬가지로, 높이와 너비가 100%인 레이어를 사용하여 브라우저 뷰포트를 덮을 수도 있으므로 페이지 크기를 계산할 필요가 없으며 동적으로 수정할 필요도 없습니다. 브라우저 크기를 조정할 때의 크기.

그러나 IE6은 "위치: 고정"을 지원하지 않습니다. 스크롤 막대를 드래그할 때 IE가 변경될 때마다 마스크가 확실히 흔들립니다. - 다시 렌더링하세요. 그러나 Microsoft는 매우 흥미로운 기능을 제공했습니다. html 또는 body 태그에 대해 정적으로 배치된 배경 이미지를 설정하면 스크롤 막대를 드래그할 때 레이어가 흔들리지 않고 "position:fixed" "를 거의 완벽하게 시뮬레이션합니다. 실제 프로젝트에서 이 기능은 나중에 설명할 다른 특수 기능도 실행할 수 있다는 것을 발견했습니다.

문제를 해결하기 위해 우리는 사악한 표현을 사용하여 IE6용 CSS에서 일부 스크립트를 작성하고 스크롤 막대를 드래그할 때 마스크 레이어의 위치를 변경했습니다. 표현은 매우 수행 집약적이라는 전설이 있지만, 우리의 표현은 손실이 거의 없습니다. 관심 있는 학생들은 표현을 깊이 있게 공부할 수 있습니다.

좋아, 큰 머리 인형 IE6과 호환된 후 우리의 잠금 화면 마스크가 주류 브라우저에 채택되었습니다. 그러나 js를 사용하여 효과를 작성하는 학생들은 항상 매우 좌절하고 항상 무언가를 던지고 싶어하므로 다음을 추가하겠습니다. 화면이 잠겨 있을 때 사용자 작업을 중단하고, 스크롤 막대, 휠, 탭 키를 비활성화하고, 모두 선택하고, 새로 고침하고, 마우스 오른쪽 버튼을 클릭하여 실제 '잠금 화면'을 시뮬레이션하는 작은 스크립트입니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>페이지 잠금</ 제목> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { visible:hidden; 왼쪽:0; 100%; 높이:100%; 배경:#000; 필터:알파(불투명도=70); } /*IE6 고정*/ * html { 배경: url(*) 고정; :0; 높이:100%; } * html #pageOverlay { 위치: 절대; 왼쪽: 표현식(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: 표현식(documentElement.scrollTop + documentElement.clientHeight ); } </style> <script> (function(){ // 객체 가져오기 var $ = function (id){ return document.getElementById(id); }; // 트래버스 vareach = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i) }; // 이벤트 바인딩 var bin = function (obj, type, fn) { if ( obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]) } else { obj.addEventListener(type, fn, false) } }; // 이벤트 제거 var unbind = function (obj, type, fn); obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn]) obj[type + fn] = null } catch(_) {} } else { obj.removeEventListener( 유형 , fn, false); }; }; // 브라우저의 기본 동작을 방지합니다. var stopDefault = function(e){ e.preventDefault() : e.returnValue = false }; 위치 var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db. scrollTop) }; }; // 잠금 화면 var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible' var p = getPage(), left = p.left, top = p.top; // 페이지 마우스 작업 제한 this.mouse = function(evt){ var e = evt || stopDefault(e); 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse) }); // 특정 키 차단: F5, Ctrl + R, Ctrl + A, 탭, 위, 아래 this.key = function(evt){ var e = evt || window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && 키 == 65) || (키 == 38) || (키 == 40)) { try{ e.keyCode = 0; ){}; stopDefault(e); }; 바인딩(document, 'keydown', lock.key) }, close: function(){ $('pageOverlay').style.visibility = 'hidden'; (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. 키); } }; 바인딩(창, '로드', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }); })(); </script> </head> <body> <button id="btn_lock" style="위치: 절대; 왼쪽:50%; 위쪽: 40%; ">잠금 화면 활성화</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ 리> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ 리> 리> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ 리> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

원문: http://www.planeart.cn/?p=792