先来看下效果图：

弹出层的html如下：
<div id="floatBoxBg"></div>
<div id="floatBox" class="floatBox">
<div class="title"><h4>标题</h4><span>关闭</span></div>
<div class="content">内容</div>
</div>

下面我的应用：
第一步：下载jquery文件，我的是1.3.2版本！请自己下载！
第二步：建个css文件，命名为 jq_div_css.css ，代码如下[自己想怎么改就怎么改]:
#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;}

第三步：下载 Lee dialog 插件, 这里我命名成 jq_div_fuc.js ，代码如下：
var dialogFirst=true;
function dialog(title,content,width,height,cssName){
if(dialogFirst==true){
var temp_float=new String;
temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></div>";
temp_float+="<div id=\"floatBox\" class=\"floatBox\">";
temp_float+="<div class=\"title\"><h4></h4><span>关闭</span></div>";
temp_float+="<div class=\"content\"></div>";
temp_float+="</div>";
$("body").append(temp_float);
dialogFirst=false;
}

$("#floatBox .title span").click(function(){
$("#floatBoxBg").animate({opacity:"0"},"normal",function());
$("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function());
});

$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":")+1,content.length);
switch(contentType){
case "url":
var content_array=content.split("?");
$("#floatBox .content").ajaxStart(function(){
    $(this).html("loading...");
});
$.ajax({
    type:content_array[0],
    url:content_array[1],
    data:content_array[2],
    error:function(){
    $("#floatBox .content").html("error...");
    },
    success:function(html){
      $("#floatBox .content").html(html);
    }
});
break;
case "text":
$("#floatBox .content").html(content);
break;
case "id":
$("#floatBox .content").html($("#"+content+"").html());
break;
case "iframe":
$("#floatBox .content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+(parseInt(height)-30)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
}

$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox "+cssName);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal");
}
以下是如何应用，及其他说明：
应用：

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

参数：

演示：

1。
弹出纯文本内容
dialog("我的标题","text:我的内容","200px","auto","text");
2。
弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div>
dialog("我的标题","id:testID","300px","auto","id");
3。
加载一个页面以框架示 把blueidea加载进来，定义css:body .iframe .content{padding:0;}复盖一下，因为.content默认padding:20px;
dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe");

以下，是我开发中应用的心得与解决的方案：
=====================================================================
我想实现的功能是这样的,点击，弹出个层，层里面是一个form表单！
奇怪的问题出现了，对这个表单，我加了jq 的验证，但全部无效！很是郁闷！我就找呀找呀找原因！后来，
实在不行了，换成iframe模式了，一开始用的是ID这个层！
iframe模式下，jq的验证就生效！
希望对遇到的朋友有所帮助！
测试浏览器，是IE8和FF3.0