jquery弹出登录窗口

引自：http://www.xij.cn/blog/?p=68

结构定义了两个层，一个为半透明的背景层，一个是弹出层主要结构，都设为浮动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 id="floatBox" class="floatBox">
      <div class="title"><h4>标题</h4><span>关闭</span></div>
      <div class="content">内容</div>
  </div>
</div>

其对应样式如下：

#floatBoxBg {
    display:none;
    width:100%;
    height:100%;
    background:#000;
    position:absolute;
    top:0;
    left:0;
}
.floatBox {
    border:#0C7FDA 5px solid;
    width:300px;
    position:absolute;
    top:50px;
    left:40%;
    z-index:1000;
}
.floatBox .title {
    height:23px;
    padding:7px 10px 0;
    color:#fff;
    background-attachment: scroll;
    background-image:url(../images/dialog_bg.gif);
    background-repeat: repeat-x;
    background-position: 0px 0px;
}
.floatBox .title h4 {
    float:left;
    padding:0;
    margin:0;
    font-size:14px;
    line-height:16px;
}
.floatBox .title span {
    float:right;
    cursor:pointer;
    vertical-align:middle;
    margin-bottom:2px;
}
.floatBox .content {
    padding:20px 15px;
    background:#fff;
}

二，弹出窗口js文件如下：

// JavaScript Document
// Lee dialog 1.0 http://www.xij.cn/blog/?p=68

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><img src=\"http://www.cnblogs.com/templates/W008/images/close_ico.gif\" width=\"22\" height=\"23\" /></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(){$(this).hide();});
  $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();});
});

$("#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)-70)+"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");
}
三，参数说明

顺序	参数	功能	备注
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加入的样式名，层内样式可以通过这个样式名来定制

四，应用
dialog(title,content,width,height,cssName);