jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.0 *******************************/ ;(function($){ $.fn.layer = function(){ var isIE = (document.all) ? true : false; var isIE6 = isIE var position = !isIE6 ? 'fixed' : 'absolute'; var containerBox = 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'}); var layer=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); function layer_iestyle(){ var maxWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + 'px'; var maxHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + 'px'; 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(); }); layer.click(function(){ containerBox.hide(); jQuery(this).remove(); }); }; })(jQuery); 哈哈，是不是很简单，但是此处有个比较大的bug,没法让IE6支持背景色透明，所以，在IE6的显示下，就会出现一大片屎黑色~~~~ 现在来说说使用方法： 第一步：引用jquery文件，这个不多说，自己下去吧，http://jquery.com 第二步：把我这个插件引用进去，这个也不多说，点击下载， 第三步：你看，你要显示在中间的内容box，我是不是没法给你实现，所以，需要你自己建一个，放在网页最下端即可， eg: 复制代码 代码如下: div div 弹弹弹，弹走鱼尾纹~~ /div /div 第四步：在你要弹出来这个内容框的地方加个时间，以click为例： 复制代码 代码如下: $('#tan').click(function(){ $('#kabulore-layer').layer(); }); 大功告成！ 注：此插件是点击灰色区域的时候，该弹出层自动隐藏，如果想加个关闭按钮再隐藏，可自己写一下close事件 您可能感兴趣的文章:兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码JS遮罩层效果 兼容ie firefox jQuery遮罩层jQuery+css+html实现页面遮罩弹出框JQuery 遮罩层实现(mask)实现代码jQuery+html5实现div弹出层并遮罩背景jquery弹出关闭遮罩层实例jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)jquery 圆角遮罩图片实现图片圆角jQuery+AJAX实现遮罩层登录验证界面（附源码）jquery下实现overlay遮罩层代码jQuery实现可兼容IE6的遮罩功能详解