jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
先实现一个比较简单的功能:
需求:网页遮罩层/弹出层,兼容IE6
幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用。
屁话不多放,无码无真相!
/******************************* *@nameLayer跨浏览器兼容插件v1.0 *******************************/ ;(function($){ $.fn.layer=function(){ varisIE=(document.all)?true:false; varisIE6=isIE&&!window.XMLHttpRequest; varposition=!isIE6?"fixed":"absolute"; varcontainerBox=jQuery(this); containerBox.css({"z-index":"9999","display":"block","position":position,"top":"50%","left":"50%","margin-top":-(containerBox.height()/2)+"px","margin-left":-(containerBox.width()/2)+"px"}); varlayer=jQuery("<div></div>"); layer.css({"width":"100%","height":"100%","position":position,"top":"0px","left":"0px","background-color":"#000","z-index":"9998","opacity":"0.6"}); jQuery("body").append(layer); functionlayer_iestyle(){ varmaxWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)+"px"; varmaxHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)+"px"; layer.css({"width":maxWidth,"height":maxHeight}); } functioncontainerBox_iestyle(){ varmarginTop=jQuery(document).scrollTop-containerBox.height()/2+"px"; varmarginLeft=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(); }); layer.click(function(){ containerBox.hide(); jQuery(this).remove(); }); }; })(jQuery);
哈哈,是不是很简单,但是此处有个比较大的bug,没法让IE6支持背景色透明,所以,在IE6的显示下,就会出现一大片屎黑色~~~~
现在来说说使用方法:
第一步:引用jquery文件,这个不多说,自己下去吧,http://jquery.com
第二步:把我这个插件引用进去,这个也不多说,点击下载,
第三步:你看,你要显示在中间的内容box,我是不是没法给你实现,所以,需要你自己建一个,放在网页最下端即可,
eg:
<divid="kabulore-layer"> <div> 弹弹弹,弹走鱼尾纹~~ </div> </div>
第四步:在你要弹出来这个内容框的地方加个时间,以click为例:
$("#tan").click(function(){ $("#kabulore-layer").layer(); });
大功告成!
注:此插件是点击灰色区域的时候,该弹出层自动隐藏,如果想加个关闭按钮再隐藏,可自己写一下close事件