深入研究jquery的弹出层----唯一兼容jquery1.9和ie火狐谷歌解决方案。

nannan408

浏览: 1783830 次
性别:
来自: 深圳

最近访客更多访客>>

greatwqs

c332030

hexin1985

yb2008qq

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

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)建议，开源框架提供多些提建议的空间，并且尽量简洁，我的意思，入口例子就一句话的肯定最受欢迎。

分享到：

如何让div背景透明，内容不透明？兼容ie, ... | sqlsever 查看字符的十六进制编码，用于乱 ...

2013-12-08 15:14
浏览 4672
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论