深入研究jquery的弹出层----唯一兼容jquery1.9和ie火狐谷歌解决方案。
1.前言。
很多人会问，jquery弹出层嘛，hide和show一下。或者找下插件就可以了吧。我一开始也是这样想的，但是我错了，百分之99.99的插件忽视了ie7的兼容，导致样式不兼容，位置不居中。这两个是出现在这些插件上最多的。就连jquery自身的dialog也是bug多多，ie7明显样式错乱，火狐根本不能用，不知道这些开发者这样搞下去，jqueryui是不是越来越鸡肋。我敢说他们推出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)建议，开源框架提供多些提建议的空间，并且尽量简洁，我的意思，入口例子就一句话的肯定最受欢迎。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17