jquery dialog2(jquery弹出层背景变暗) dodo

经常会看到这种弹出层背景变暗的效果，感觉手痒于是自己写了一个基于jquery的弹出层类，相比ThickBox来说比较简单，功能没它那么强大。

我习惯先写好结构和样式，然后再写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，通过它就可以把层内的内容给排好了。

标题

关闭

内容

弹出层的html如下： <div id="floatBoxBg"></div>
<div id="floatBox" class="floatBox">
<div class="title"><h4>标题</h4><span>关闭</span></div>
<div class="content">内容</div>
</div> css默认样式如下：#floatBoxBg{display:none;100%;height:100%;background:#000;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;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;}


参数：

顺序	参数	功能	备注
1	title	弹出层的标题	必填，纯文本
2	content	弹出层的内容	:url	get或post某一页面里的html，该页面要求只包含body的子标签
			:text	直接写入内容
			:id	显示页面里某id的子标签
			:iframe	层内内容以框架显示
3	width	弹出层的宽	必填，css值，比如“200px”
4	height	弹出层的高	如上，但是可用“auto”
5	cssName	弹出层的css	给id floatBox加入的样式名，层内样式可以通过这个样式名来定制

相关下载：

下载最新版本jQuery
下载Lee dialog插件
下载默认css，应用时自行修改

应用：

dialog(title,content,width,height,cssName);

演示：

1. post提交表单返回信息$("#form1").submit(function(){
   var str=escape($("#str").val());
   dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","from");
   return false;
   });
   试试
   get加载一个.html文件（也可以是.php/.asp?id=4之类的） dialog("我的标题","url:get?test.html","200px","auto","text"); 试试
2. 弹出纯文本内容 dialog("我的标题","text:我的内容","200px","auto","text"); 试试
3. 弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div>
   dialog("我的标题","id:testID","300px","auto","id"); 试试

   Lee dialog

4. 加载一个页面以框架示 把blueidea加载进来，定义css:body .iframe .content{padding:0;}复盖一下，因为.content默认padding:20px;
   dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe"); 试试