自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7
来源:互联网 发布:mac如何下载qq游戏 编辑:程序博客网 时间:2024/05/16 18:58
本屌丝最近工作要求重写网站所有代码,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);
现在来说说使用方法:
第一步:引用jquery文件,这个不多说,自己下去吧,http://jquery.com
第二步:把我这个插件引用进去,这个也不多说,自己下去吧,http://download.csdn.net/download/u010480479/7305857
第三步:你看,你要显示在中间的内容box,我是不是没法给你实现,所以,需要你自己建一个,放在网页最下端即可,
eg:
<div id="kabulore-layer"><div class="box_container">弹弹弹,弹走鱼尾纹~~</div></div>
第四步:在你要弹出来这个内容框的地方加个时间,以click为例:
$("#tan").click(function(){$("#kabulore-layer").layer();});
大功告成!
注:此插件是点击灰色区域的时候,该弹出层自动隐藏,如果想加个关闭按钮再隐藏,可自己写一下close事件
如有任何交流或者指教,请联系:http://www.yinmu.me
后续完善版会逐渐跟上,目前在赶项目,比较苦逼的忙~~
2 0
- 自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7
- 自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6
- jquery实现图片自动轮换效果(兼容IE6,IE7)
- jquery 实现弹出层插件
- ie6 ie7 同兼容的遮盖层
- jQuery 兼容ie6的固定定位插件,使用简单
- jQuery实现小功能之弹出层
- jquery实现遮罩功能(兼容IE6)
- jquery 弹出层 插件
- Jquery 弹出层插件
- jquery 弹出层插件
- jquery弹出层插件
- 写了一个qq表情jquery插件(ie6&ie6+ chrome firefox兼容)
- 弹出div屏幕居中,兼容ie6 ie7 firefox
- jquery实现文件树目录、折叠目录树代码(兼容IE6,IE7)
- jquery 弹出层垂直居中不动 页面可滚动兼容ie6
- jQuery Dialog 弹出层对话框插件--功能全面
- jQuery Dialog 弹出层对话框插件--功能全面
- unity3d 学习笔记(一)
- hdu4811
- LeetCode_Insertion Sort List
- 解决adb server is out of date. killing...问题
- XCode5.1出现“could not build module XXX”的情况
- 自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7
- OOP中的多态
- c++学习杂项
- 利用斯坦福主题模型工具(stanford TMT)做LDA
- cha
- GridLayout 简单实例
- C3P0是一个开放源代码的JDBC连接池
- 设计模式(一) 单例模式
- 下面是20个非常有用的Java程序片段,希望能对你有用。