1.前言。
很多人会问,jquery弹出层嘛,hide和show一下。或者找下插件就可以了吧。我一开始也是这样想的,但是我错了,百分之99.99的插件忽视了ie7的兼容,导致样式不兼容,位置不居中。这两个是出现在这些插件上最多的。 就连jquery自身的dialog也是bug多多,ie7明显样式错乱,火狐根本不能用,不知道这些开发者这样搞下去,jquery ui是不是越来越鸡肋。我敢说他们推出dialog根本没测。牢骚少发,插件做不通这件事情,还是用hide和show搞。自己写div。这里感谢这位大牛,id叫“北朝门”的大牛的博客。http://hi.baidu.com/9idea/item/d84b19c95805a413505058c0
我其实最后也想自己写了,时间比较紧。
2.直接代码,copy可以用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb-2312" />
<title>jQuery弹出层效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<input id="Button1" type="button" value="点击弹出层" onClick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div>
<span onClick="CloseDiv('MyDiv','fade')" style="float:right">关闭</span>
</div>
<br />
这里是弹出层的内容
</div>
</body>
</html>
3.总结。
(1)市面上的插件我基本访问了个遍。给我感受最深的是国产插件的浮躁。有的是根本没做好就急着商业化。有的也是没做好,就半途而废,苟且偷安,贻害后人,没有维护的插件是可怕的,除非已经无可挑剔。有的是已经有很多人使用,但兼容性该没考虑到的还是没考虑到,这些作者们大概也是躺在功劳簿上面睡的不省人事了吧。特别是lhgdialog,iframe的弹出层已经脱离了div管辖,ie7居中都这么大问题,还能说什么。
(2) 一些开源的弹出层插件就更加了,基本的兼容都没搞定,就一直往下做了, 我只能说,做多错多,害人多多。
(3)建议,开源框架提供多些提建议的空间,并且尽量简洁,我的意思,入口例子就一句话的肯定最受欢迎。
分享到:
相关推荐
如果你的网站需要维护对IE8或者低版本(或者是IE9和IE10在兼容模式下运行),你只需要沿用jQuery1.9或者以下版本。如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9,...
jQuery Nice File Input 已经在所有主要浏览器上使用 jQuery 1.9+ 进行了测试: Firefox 2+(Win、Mac、Linux) IE8+(赢) Chrome 6+(Win、Mac、Linux) Safari 3.2+ (Win, Mac) Opera 8+(Win、Mac、Linux)...
如果你的网站需要维护对IE8或者低版本(或者是IE9和IE10在兼容模式下运行),你只需要沿用jQuery1.9或者以下版本。 如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9...
Jquery 无刷新图片上传插件ajaxPostUpload 1.免费永久开源 2.单文件上传 ...4.兼容谷歌、火狐、360等主流浏览器 5.文件开源代码只有1.9K,属于轻量级图片上传插件 6.图片预览功能 7.欢迎补充功能和提交功能
Jquery1.9版本中$.browser已被剔除: 判断浏览器类型: 代码如下: $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase())...
在jquery.1.9以前的版本,可以使用$.browser很轻松的判断浏览器的类型和版本,但是在1.9中和以后的版本中,$.browser已经被删除,下面就介绍一下如何实现此功能,希望能够给需要的朋友带来帮助。 一.自定义代码: $...
Chrome、Safari、Firefox 3.6+、Opera、IE7+ 通过配置、方法 API 和触发事件高度可定制。 从 DOM 或 JSON 配置或两者添加的图像。 图像反射和透视是可配置和可选的。 图像类别和完全 CSS 样式的可选菜单。
腾讯首页伸缩广告V1.9(此资源来源于腾讯首页) 1、广告打开方式:a:fullscreen,打开停留,时间到,点击/自动收缩,可重复浏览; b:fullscreen2,打开,用户点击收缩,可重复浏览; c:couplet,对联,页面固定...
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 。xhEditor完全基于Javascript开发,您可以应用在任何的...
CSS compliant JavaScript library based jQuery, HTML5 and CSS3.The product supports all major desktop and mobile web browsers - Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google ...
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。完全基于javascript开发,您可以应用在任何的服务端语言...
支持IE7+,FireFox,Chrome。 初始化调用插件的外容器,只需设置宽高样式即可,无需其它设置。 因插件是刚开始阶段,一些功能并未能完善全,如:放大,缩小功能。 插件中一些滚动的计算是硬算出来的(勿喷)。 插件...