原文地址:http://wange.im/jquery-dialog-layer.html
弹出对话框在一个网站中是相对比较常见的功能,无论是确认信息还是注册申请,都可能会用到弹出层。用 JS 来实现这样的弹出对话框效果是再合适不过的了,就 jQuery 而言,就有很多高手们开发好的弹出层插件,甚至连 jQuery 官方也有提供 Dialog UI 组件。
之前写过一些弹出层的效果,也都是借助于别人开发好的 jQuery 插件,这些插件的优点是参数多、功能全、方便调用,但是不可避免地会导致插件脚本过于庞大,很多功能基本用不到,感谢任平生童鞋一语惊醒梦中人,其实弹出的对话框层用 jQuery 来实现是相当简单的,简单到只需要两句 JS,一句是弹出,另一句就是关闭。省去了很多不必要的冗余的功能和 JS 代码。
先来看一下 DEMO,再来看一下代码有多简单:
1、首先是 HTML 部分:
- <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 弹出层 -->
<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 部分:
- #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;
- }
#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:
- $(document).ready(function(){
- $('#layerBtn').click(function(){$('#layer').fadeIn();}); //弹出层
- $('#close').click(function(){$('#layer').fadeOut();}); //关闭层
- });
$(document).ready(function(){
$('#layerBtn').click(function(){$('#layer').fadeIn();}); //弹出层
$('#close').click(function(){$('#layer').fadeOut();}); //关闭层
});
好了,就是这样,算是一个超精简的弹出层效果吧,其中去掉了拖动效果和定时关闭等我认为不需要的代码,因为我需要的网站上只有一个弹出对话框,也没有考虑扩展性什么的,能省则省吧,管用就行,希望也能对你有用。