DIV CSS 佈局教程網

主要層左右居中，設置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

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=\"/upload/2009-12/20091224021446804.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);