位置：首页>> 网络编程>> JavaScript>> jquery弹出层背景变暗 Lee dialog

jquery弹出层背景变暗 Lee dialog

作者：十字花匠　来源：十字花匠　发布时间：2008-08-18 13:11:00　

标签：jquery,弹出,层

经常会看到这种弹出层背景变暗的效果，感觉手痒于是自己写了一个基于jquery的弹出层类。

我习惯先写好结构和样式，然后再写js交互效果。结构定义了两个层，一个为半透明的背景层，一个是弹出层主要结构，都设为浮动position:absolute;背景层遮掉所有body内容很容易做到。主要层左右居中，设置left等于窗口宽除二减去自身层宽除二就居中了，至于窗口上下居中我没做到，固定了top等于滚动条隐去的scrollTop加上50px;

当事件触发这个类时，首先判断一下两个层是否已经append到body里面，否则每次触发它就一直增加增加了。设置了五个参数title、content、width、height、cssName，它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、text、id、iframe四种加载方式，通过ajax以get或post加载目标url的html内容，text是直接在事件里写入内容，而id是取得页面上某个id里面的html显示到弹出层里，iframe都知道是在层里面以框架显示目标url了。往往弹出层里面的内容样式也是各种各样的，所以加了一个参数cssName，通过它就可以把层内的内容给排好了。

看看演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Author" content="十字花匠" /><title>jquery弹出层背景变暗 Lee dialog</title><script type="text/javascript" src="http://www.xij.cn/blog/wp-content/uploads/jquery-latest.pack.js"></script><script type="text/javascript" src="http://www.xij.cn/blog/wp％2Dcontent/uploads/2008/08/dialog/dialog.js"></script><script type="text/javascript">$(function(){$("#form1").submit(function(){ var str=escape($("#str").val()); dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","form"); return false;});$("#bt1").click(function(){ dialog("我的标题","url:get?test.html","200px","auto","text");});$("#bt2").click(function(){ dialog("我的标题","text:我的内容","200px","auto","text");});$("#bt3").click(function(){ dialog("我的标题","id:testID","300px","auto","id");});$("#bt4").click(function(){ dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe");});});</script><style type="text/css">body{padding:50px 0;margin:0;background:#333;font-size:12px;line-height:14px;}form,ul,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}input,textarea,select,button{font-size:12px;}img{border:none;}em{font-style:normal;}cite,small,address{font-size:12px;font-style:normal;color:#999;}a{color:#00f;text-decoration:underline;}/*浮层*/#floatBoxBg{display:none;width:100％;height:100％;background:#000;position:absolute;top:0;left:0;}.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40％;}.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}.floatBox .title span{float:right;cursor:pointer;}.floatBox .content{padding:20px 15px;background:#fff;}/*页面*/#box{padding:20px;margin:0 50px;background:#999;font-size:14px;}#box h1{font-size:40px;line-height:50px;height:90px;}#box #testFloatBox{position:static;margin:20px 0;}#box table{margin:20px 0;}#box h3{font-size:16px;padding:20px 0 10px;}code{font-size:12px;color:#333;margin:10px;display:block;}#box ol{margin:0;padding:0;list-style-position:inside;list-style-type:decimal;}#box ol li{margin:0 0 20px 0;line-height:18px;}#box ol li span{color:#00f;text-decoration:underline;cursor:pointer;}#box ol li strong{display:block;}body .iframe .content{padding:0;}#box .title span{font-size:12px;}#box p{line-height:18px;}</style></head><body><div id="box"> <h1>Lee dialog 1.0</h1> <p><a href="http://www.xij.cn/blog">十字花匠</a> 2008.8.16</p> <div id="testFloatBox" class="floatBox"> <div class="title"> <h4>标题</h4> <span>关闭</span></div> <div class="content">内容</div> </div> <p> 弹出层的html如下： <code><div id="floatBoxBg"></div><br /> <div id="floatBox" class="floatBox"><br /> <div class="title"><h4>标题</h4><span>关闭</span></div><br /> <div class="content">内容</div><br /> </div></code> css默认样式如下：<code>#floatBoxBg{display:none;width:100％;height:100％;background:#000;position:absolute;top:0;left:0;}<br /> .floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40％;}<br /> .floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}<br /> .floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}<br /> .floatBox .title span{float:right;cursor:pointer;}<br /> .floatBox .content{padding:20px 15px;background:#fff;} <br /> </code></p> <h3>参数：</h3> <table width="0" border="1" cellpadding="5" cellspacing="0"> <tr> <th scope="col">顺序</th> <th scope="col">参数</th> <th scope="col">功能</th> <th colspan="2" scope="col">备注</th> </tr> <tr> <th scope="row">1</th> <th scope="row">title</th> <td>弹出层的标题</td> <td colspan="2">必填，纯文本</td> </tr> <tr> <th rowspan="4" scope="row">2</th> <th rowspan="4" scope="row">content</th> <td rowspan="4">弹出层的内容</td> <td>:url</td> <td>get或post某一页面里的html，该页面要求只包含body的子标签</td> </tr> <tr> <td>:text</td> <td>直接写入内容</td> </tr> <tr> <td>:id</td> <td>显示页面里某id的子标签</td> </tr> <tr> <td>:iframe</td> <td>层内内容以框架显示</td> </tr> <tr> <th scope="row">3</th> <th scope="row">width</th> <td>弹出层的宽</td> <td colspan="2">必填，css值，比如“200px”</td> </tr> <tr> <th scope="row">4</th> <th scope="row">height</th> <td>弹出层的高</td> <td colspan="2">如上，但是可用“auto”</td> </tr> <tr> <th scope="row">5</th> <th scope="row">cssName</th> <td>弹出层的css</td> <td colspan="2">给id floatBox加入的样式名，层内样式可以通过这个样式名来定制</td> </tr> </table> <h3>相关下载：</h3> <p>下载最新版本<a href="http://docs.jquery.com/Downloading_jQuery">jQuery</a><br /> 下载<a href="http://www.xij.cn/blog/wp-content/uploads/2008/08/dialog/dialog.js">Lee dialog</a>插件<br /> 下载默认<a href="http://www.xij.cn/blog/wp-content/uploads/2008/08/dialog/dialog.css">css</a>，应用时自行修改</p> <h3>应用：</h3> <p>dialog(title,content,width,height,cssName);</p> <h3>演示：</h3> <ol> <li><strong>post提交表单返回信息</strong>$("#form1").submit(function(){<br /> var str=escape($("#str").val());<br /> dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","from");<br /> return false;<br /> }); <form id="form1" name="form1" method="post" action=""> <label> <input name="str" type="text" id="str" value="test" /> </label> <button type="submit">试试</button> </form> <strong>get加载一个.html文件（也可以是.php/.asp?id=4之类的）</strong> dialog("我的标题","url:get?test.html","200px","auto","text"); <span id="bt1">试试</span></li> <li><strong>弹出纯文本内容</strong> dialog("我的标题","text:我的内容","200px","auto","text"); <span id="bt2">试试</span></li> <li><strong>弹出某id里面的html</strong>页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div><br /> dialog("我的标题","id:testID","300px","auto","id"); <span id="bt3">试试</span> <div id="testID" style="display:none;"> <h2>Lee dialog</h2> </div> </li> <li><strong>加载一个页面以框架示</strong> 把blueidea加载进来，定义css:body .iframe .content{padding:0;}复盖一下，因为.content默认padding:20px;<br /> dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe"); <span id="bt4">试试</span> </li> </ol></div></body></html>

相关下载：

下载最新版本jQuery

下载Lee dialog插件：

下载地址：dialog.js （2.17 KB）

更新

2008-8-16 层切换时加入动画

2008-8-15 完成基本功能

投稿

jquery弹出层背景变暗 Lee dialog

猜你喜欢