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

最新推荐文章于 2020-05-12 18:58:16 发布

nannan408

最新推荐文章于 2020-05-12 18:58:16 发布

阅读量240

点赞数

分类专栏： jquery 文章标签： javascript 开发工具 ui ViewUI

本文链接：https://blog.youkuaiyun.com/nannan408/article/details/84510471

版权

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文详细分析了市面上流行的jQuery弹出层插件存在的兼容性问题和设计缺陷，强调了自定义实现的重要性。通过提供一套简单的HTML、CSS和JavaScript代码示例，展示了如何创建一个兼容多种浏览器的弹出层效果，包括隐藏和显示功能，以及如何在不同场景下调整弹出层的位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

[b]3.总结。[/b]
(1)市面上的插件我基本访问了个遍。给我感受最深的是国产插件的浮躁。有的是根本没做好就急着商业化。有的也是没做好，就半途而废，苟且偷安，贻害后人，没有维护的插件是可怕的，除非已经无可挑剔。有的是已经有很多人使用，但兼容性该没考虑到的还是没考虑到，这些作者们大概也是躺在功劳簿上面睡的不省人事了吧。特别是lhgdialog，iframe的弹出层已经脱离了div管辖，ie7居中都这么大问题，还能说什么。
(2) 一些开源的弹出层插件就更加了，基本的兼容都没搞定，就一直往下做了，我只能说，做多错多，害人多多。
(3)建议，开源框架提供多些提建议的空间，并且尽量简洁，我的意思，入口例子就一句话的肯定最受欢迎。