就 jQuery 而言，就有很多高手们开发好的弹出层插件，甚至连 jQuery 官方也有提供 Dialog UI 组件。
之前写过一些弹出层的效果，也都是借助于别人开发好的 jQuery 插件，这些插件的优点是参数多、功能全、方便调用，但是不可避免地会导致插件脚本过于庞大，很多功能基本用不到，感谢任平生童鞋一语惊醒梦中人，其实弹出的对话框层用 jQuery 来实现是相当简单的，简单到只需要两句 JS，一句是弹出，另一句就是关闭。省去了很多不必要的冗余的功能和 JS 代码。
先来看一下 DEMO，再来看一下代码有多简单：
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <style type="text/css"> #layer{ width:600px; height:300px; background:#ccc; border:1px solid #aaa; position:fixed; _position:absolute; /* 勉强应付 IE6 */ top:50%; right:50%; margin:-150px -300px 0 0; display:none; /* 默认不显示 */ } #close{ position:absolute; top:0; right:0; font:20px/1 Arial; text-decoration:none; } </style> <script type="text/javascript" src="js/jquery.js"></script> <title>jQuery 精简版弹出对话框层</title> </head> <body> <input type="submit" id="layerBtn" value="点我点我快点我！！！" /> <div id="layer"> <p>我弹出来了~ ?(?3?)?</p> <p>我弹出来了~ ?(￣?￣)?</p> <p>我弹出来了~ ("?□?)/</p> <p>我弹出来了~ ?(′?`)?</p> <p>我弹出来了~ o(∩_∩)o </p> <p>我弹出来了~ ?(???)?</p> <p>我弹出来了~ ~(???)/~</p> <p>我弹出来了~ Y(^_^)Y</p> <a href="javascript:void(0)" title="关闭" id="close">X</a> </div> <script type="text/javascript"> $(document).ready(function(){ $('#layerBtn').click(function(){$('#layer').fadeIn();}); $('#close').click(function(){$('#layer').fadeOut();}); }); </script> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html> |
|
因为我们一般要求弹出层相对于浏览器窗口垂直水平居中，而且可以跟随滚动条下拉而下移，所以我这里用了 position:fixed; 但是 IE6 总是比较杯具，偏偏不支持这么一个 CSS，无奈我用了 position:absolute; 来对付 IE6，不过这也只能勉强解决这一 bug，因为 position:absolute 只能把弹出层固定在第一屏的垂直居中位置，而无法随滚动条下移，具体如何解决 fixed 这个 IE6 的 bug 在这里就不多费口舌了。
3、JS 部分，当然必需先加载 jQuery：
| 代码如下 | 复制代码 |
|
$(document).ready(function(){ $('#layerBtn').click(function(){$('#layer').fadeIn();}); //弹出层 $('#close').click(function(){$('#layer').fadeOut();}); //关闭层 }); |
|
fadeOut() 方法
定义和用法
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
语法
$(selector).fadeOut(speed,callback)
定义和用法
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
语法
$(selector).fadeIn(speed,callback)
提示和注释
提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。