lightBox 간단한 전체 화면 투명 마스크 솔루션_자바스크립트 기술

요점을 말하자면
전체 화면 반투명 마스크 레이어는 이제 web2.0 웹사이트에서 널리 사용됩니다. 대부분의 마스크는 페이지 크기를 계산한 다음 페이지와 동일한 크기의 레이어로 덮는 방식으로 구현됩니다. , Tencent qzone, wordpress 배경 등. 이 방법은 이해할 수 있지만 페이지가 매우 길면 IE8에서는 실패합니다. (외국 정보의 설명은 기계의 그래픽 카드와 관련이 있다고 합니다.) 완벽한 플롯을 가진 일부 학생들은 이 문제에 직면한 후 절망에 빠졌습니다. , 심지어 나는 IE8이 그의 작업을 구문 분석하기 위해 IE7의 방법을 사용하도록 강요하기를 원합니다. 실제로 더 좋은 방법이 있습니다. CSS를 사용하여 해결해 보겠습니다.
'위치:고정'을 기억하시나요? CSS2의 새로운 속성으로, 스크롤 바를 드래그할 때 요소가 페이지에 고정되어 움직이지 않게 할 수 있습니다. 예를 들어 Qzone 상단의 고정 네비게이션 바는 이렇게 구현됩니다. 마찬가지로, 높이와 너비가 100%인 레이어를 사용하여 브라우저 뷰포트를 덮을 수도 있으므로 전체 화면 마스킹이 가능합니다. 더 이상 페이지 크기를 계산할 필요가 없으며, 브라우저 크기를 조정할 때 크기를 동적으로 수정할 필요도 없습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>페이지 잠금</title> <meta name="author" content="www.planeart.cn"> <style> #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } </style> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <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>囧</li> </ol> <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

하지만 IE6에서는 "position:fixed"를 지원하지 않습니다. 정적 위치 지정을 시뮬레이션하기 위해 js를 통해서만 TOP 값을 동적으로 수정할 수 있습니다. IE가 다시 움직이기 때문에 마스크가 확실히 흔들립니다. 변경될 때마다 렌더링합니다. 그러나 Microsoft는 매우 흥미로운 기능을 제공했습니다. html 또는 body 태그에 대해 정적으로 배치된 배경 이미지를 설정하면 스크롤 막대를 드래그할 때 레이어가 흔들리지 않고 "position:fixed" "를 거의 완벽하게 시뮬레이션합니다. 나는 실제 프로젝트에서 이 기능이 나중에 설명할 다른 특수 기능을 실행할 수도 있다는 것을 발견했습니다.
문제를 해결하기 위해 Wanhe 표현식을 사용하여 IE6용 CSS에서 일부 스크립트를 작성하고 스크롤 막대를 드래그할 때 마스크 레이어의 위치를 ​​조정합니다. 표현은 매우 수행 집약적이라는 전설이 있지만, 우리의 표현은 손실이 거의 없습니다. 관심 있는 학생들은 표현을 깊이 있게 공부할 수 있습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>페이지 잠금</title> <meta name="author" content="www.planeart.cn"> <style> #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } /*IE6 fixed*/ * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop documentElement.clientHeight - this.offsetHeight); } </style> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <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>囧</li> </ol> <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">페이지 잠금<title> </title> <meta name="author" content="www.planeart.cn"> <style> #pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } /*IE6 fixed*/ * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop documentElement.clientHeight - this.offsetHeight); } </style> <button id="btn_lock" style="position: absolute; left:50%; top: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>囧</li> </ol> <div id="pageOverlay"></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]