jQuery는 IE6 및 IE7_jquery와 호환되는 간단한 웹 페이지 마스크 레이어/팝업 레이어 효과를 구현합니다.

최근 직장에서 웹사이트의 모든 코드를 다시 작성해야 했는데... 담당자가 온라인 플러그인을 사용하지 말라고 하는 일이 발생했습니다. 아~~맙소사!! 수백만 명 초원의 질주하는 말의 요구사항~~~

먼저 비교적 간단한 기능 구현:

요구사항: 웹페이지 마스크 레이어/팝업 레이어, IE6 호환

다행히 이전에 js 버전을 교묘하게 모아서 나중에 사용할 수 있도록 jQuery 플러그인에 다시 작성했습니다.

더 이상 헛소리도, 검열도, 진실도 없습니다!

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

/*********************************
* @name 레이어 브라우저 간 호환 플러그인 v1.0
***** ****************************/
; (function($){
$.fn.layer = function(){
var isIE = (document.all) ? true : false;
var isIE6 = isIE && !window.XMLHttpRequest ;
var position = !isIE6 ? "고정": "절대";
var ContainerBox = jQuery(this)
containerBox.css({"z-index":"9999","display" :"차단","position":position ,"top":"50%","left":"50%","margin-top": -(containerBox.height()/2) "px"," margin-left ": -(containerBox.width()/2) "px"});
var layer=jQuery("

");
layer.css({ "너비":"100%","높이":"100%","위치":위치,"상단":"0px","왼쪽":"0px","배경색":"#000" ,"z -index":"9998","opacity":"0.6"});
jQuery("body").append(layer)
function layer_iestyle(){
var maxWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) "px";
var maxHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
layer .css( {"width" : maxWidth , "height" : maxHeight });
}
function ContainerBox_iestyle(){
var marginTop = jQuery(document).scrollTop - ContainerBox.height()/ 2 "px" ;
var marginLeft = jQuery(document).scrollLeft - ContainerBox.width()/ 2 "px"
containerBox.css({"margin-top" : marginTop , "margin-left" : marginLeft })
}
if(isIE){
layer.css("filter","alpha(opacity=60)")
}
if(isIE6){
layer_iestyle();
containerBox_iestyle();
}
jQuery("window").resize(function(){
layer_iestyle();
}); .click( function(){
containerBox.hide();
jQuery(this).remove();
})
})(jQuery); >

ㅋㅋㅋ 아주 간단하지 않나요? 그런데 여기에는 큰 버그가 있습니다. IE6에서는 배경색 투명을 지원하지 못해서 IE6 디스플레이 아래에 커다란 검은 똥이 나옵니다~~ ~

이제
사용법에 대해 이야기하겠습니다.

1단계: jquery 파일을 인용합니다. 이에 대해서는 자세히 설명하지 않겠습니다. http://jquery.com
2단계: 내 플러그인을 참조하세요. 이에 대해서는 자세히 설명하지 않겠습니다.
다운로드하려면 클릭
,
3단계: 보세요, 가운데 상자에 표시하고 싶은 콘텐츠를 제가 구현할 수 없으니 직접 만들어서 웹 페이지 하단에 넣어야 합니다.
예:

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

까마귀 발을 튕겨보세요~~

4단계: 팝업 시간을 원하는 곳에 콘텐츠 상자를 추가합니다. 클릭을 예로 들어보세요.

코드 복사

코드는 다음과 같습니다: $("# tan").click(function(){ $("#kabulore-layer").layer();

} );

끝났습니다!

참고: 이 플러그인은 회색 영역을 클릭하면 팝업 레이어를 자동으로 숨깁니다. 닫기 버튼을 추가한 후 숨기려면 닫기 이벤트를 직접 작성하면 됩니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.