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


Posted in Javascript onJune 16, 2014

本?潘孔罱?ぷ饕?笾匦赐?舅?写?耄?o...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~

先实现一个比较简单的功能:

需求:网页遮罩层/弹出层,兼容IE6

幸好本?潘恳郧按厦魇占?烁?s的版本,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事件

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
javascript操纵OGNL标签示例代码
Jun 16 #Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 #Javascript
select多选 multiple的使用示例
Jun 16 #Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
JS 常用校验函数
2009/03/26 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Django之form组件自动校验数据实现
2020/01/14 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
接受捐赠答谢词
2014/01/27 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers