相思资源网 Design By www.200059.com
本屌丝最近工作要求重写网站所有代码,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事件
标签:
遮罩层,弹出层

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?