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 相关文章推荐
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
js获取微信版本号的方法
May 12 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
vue实现文件上传功能
Aug 13 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
数字漫画:comiXology
2020/06/13 全球购物
集体婚礼证婚词
2014/01/13 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2015年大学生工作总结
2015/04/21 职场文书
电力培训学习心得体会
2016/01/11 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
MySQL的索引你了解吗
2022/03/13 MySQL
Java界面编程实现界面跳转
2022/06/16 Java/Android