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

 更新时间:2014年06月16日 16:42:42   投稿:whsnow  
自写写的一个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 && !window.XMLHttpRequest;
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 id="kabulore-layer">
<div class="box_container">
弹弹弹,弹走鱼尾纹~~
</div>
</div>

第四步:在你要弹出来这个内容框的地方加个时间,以click为例:
复制代码 代码如下:

$("#tan").click(function(){
$("#kabulore-layer").layer();
});

大功告成!

注:此插件是点击灰色区域的时候,该弹出层自动隐藏,如果想加个关闭按钮再隐藏,可自己写一下close事件

相关文章

  • jquery点击页面任何区域实现鼠标焦点十字效果

    jquery点击页面任何区域实现鼠标焦点十字效果

    鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素,这些都是在系统开发是经常需要用到的,下面为大家介绍下具体的实现,感兴趣的朋友可以参考下哈
    2013-06-06
  • jQuery中first()方法用法实例

    jQuery中first()方法用法实例

    这篇文章主要介绍了jQuery中first()方法用法,实例分析了first()方法的功能、定义及获取匹配元素集合中的第一个元素时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery判断页面网址是否有效的两种方法

    jquery判断页面网址是否有效的两种方法

    本文主要对jquery判断页面网址是否有效的两种方法:jQuery方法;AJAX XMLHTTP方法;需要的朋友可以参考借鉴下
    2016-12-12
  • jQuery循环滚动展示代码 可应用到文字和图片上

    jQuery循环滚动展示代码 可应用到文字和图片上

    循环滚动展示的文字和图片每个人都见过,实现类似效果的 JS 也很多。但如果只用于几个条目或三五张图片,体积庞大的 JS 会浪费资源
    2012-05-05
  • 使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

    使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

    在项目中遇到这样的需求当用户点击编辑时,在点击行下动态产生一行,编辑铵钮变为disabled,新产生的一行有更新和取消的铵钮,点击“取消”铵钮,删除刚刚动态产生的行,编辑铵钮状态恢复。下面小编给大家分享实例代码,一起看看吧
    2017-03-03
  • 使用jQuery操作DOM的方法小结

    使用jQuery操作DOM的方法小结

    本文主要介绍了使用jQuery操作DOM的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jQuery 监控键盘一段时间没输入

    jQuery 监控键盘一段时间没输入

    当一个文本框中,里面的内容1秒钟无变化,则表示用户1秒钟内无输入,说明用户是已经输入完成,再等待返回数据了。那么jQuery如何实现判断1秒内无输入呢,一起通过本文学习吧
    2016-04-04
  • jQuery实现下拉框功能实例代码

    jQuery实现下拉框功能实例代码

    这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery获取checkbox选中的值

    jQuery获取checkbox选中的值

    jquery checkbox选择器在程序开发中经常会用到,接下来通过实例代码给大家介绍jquery获取checkbox选中的值,需要的朋友参考下
    2016-01-01
  • jQuery模拟黑客帝国矩阵效果实例

    jQuery模拟黑客帝国矩阵效果实例

    这篇文章主要介绍了jQuery模拟黑客帝国矩阵效果的方法,实例分析了jQuery操作页面元素实现动画效果的技巧,需要的朋友可以参考下
    2015-06-06

最新评论