jQuery 精简版弹出对话框层

原文地址：http://wange.im/jquery-dialog-layer.html

弹出对话框在一个网站中是相对比较常见的功能，无论是确认信息还是注册申请，都可能会用到弹出层。用 JS 来实现这样的弹出对话框效果是再合适不过的了，就 jQuery 而言，就有很多高手们开发好的弹出层插件，甚至连 jQuery 官方也有提供 Dialog UI 组件。

之前写过一些弹出层的效果，也都是借助于别人开发好的 jQuery 插件，这些插件的优点是参数多、功能全、方便调用，但是不可避免地会导致插件脚本过于庞大，很多功能基本用不到，感谢任平生童鞋一语惊醒梦中人，其实弹出的对话框层用 jQuery 来实现是相当简单的，简单到只需要两句 JS，一句是弹出，另一句就是关闭。省去了很多不必要的冗余的功能和 JS 代码。

先来看一下 DEMO，再来看一下代码有多简单：

1、首先是 HTML 部分：

[html] view plain copy print ?

1. <input type="submit" id="layerBtn" value="点我点我快点我！！！" />  
2. <!-- S 弹出层 -->  
3. <div id="layer">  
4.     <p>我弹出来了~</p>  
5.     <p>我弹出来了~</p>  
6.     <p>我弹出来了~</p>  
7.     <p>我弹出来了~</p>  
8.     <p>我弹出来了~</p>  
9.     <p>我弹出来了~</p>  
10.     <p>我弹出来了~</p>  
11.     <p>我弹出来了~</p>  
12.     <a href="javascript:void(0)" title="关闭" id="close">X</a>  
13. </div>  
14. <!-- E 弹出层 -->  

<input type="submit" id="layerBtn" value="点我点我快点我！！！" />
<!-- S 弹出层 -->
<div id="layer">
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <p>我弹出来了~</p>
    <a href="javascript:void(0)" title="关闭" id="close">X</a>
</div>
<!-- E 弹出层 -->

2、然后是 CSS 部分：

[css] view plain copy print ?

1. #layer{  
2.     width:600px;  
3.     height:300px;  
4.     background:#ccc;  
5.     border:1px solid #aaa;  
6.     position:fixed;  
7.     _position:absolute;    /* 勉强应付 IE6 */  
8.     top:50%;  
9.     right:50%;  
10.     margin:-150px -300px 0 0;  
11.     display:none;    /* 默认不显示 */  
12. }  
13. #close{  
14.     position:absolute;  
15.     top:0;  
16.     right:0;  
17.     font:20px/1 Arial;  
18.     text-decoration:none;  
19. }  

#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;
}

因为我们一般要求弹出层相对于浏览器窗口垂直水平居中，而且可以跟随滚动条下拉而下移，所以我这里用了 position:fixed; 但是 IE6 总是比较杯具，偏偏不支持这么一个 CSS，无奈我用了 position:absolute; 来对付 IE6，不过这也只能勉强解决这一 bug，因为 position:absolute 只能把弹出层固定在第一屏的垂直居中位置，而无法随滚动条下移，具体如何解决 fixed 这个 IE6 的 bug 在这里就不多费口舌了。

3、JS 部分，当然必需先加载 jQuery：

[javascript] view plain copy print ?

1. $(document).ready(function(){  
2.     $('#layerBtn').click(function(){$('#layer').fadeIn();});    //弹出层   
3.     $('#close').click(function(){$('#layer').fadeOut();});    //关闭层   
4. });  

$(document).ready(function(){
    $('#layerBtn').click(function(){$('#layer').fadeIn();});    //弹出层
    $('#close').click(function(){$('#layer').fadeOut();});    //关闭层
});

好了，就是这样，算是一个超精简的弹出层效果吧，其中去掉了拖动效果和定时关闭等我认为不需要的代码，因为我需要的网站上只有一个弹出对话框，也没有考虑扩展性什么的，能省则省吧，管用就行，希望也能对你有用。