jquery 彈出登錄窗口實現(xiàn)代碼

更新時間：2009年12月24日 02:14:47 作者：

結(jié)構(gòu)定義了兩個層，一個為半透明的背景層，一個是彈出層主要結(jié)構(gòu)，都設為浮動position:absolute;背景層遮掉所有body內(nèi)容很容易做到。

主要層左右居中，設置left等于窗口寬除二減去自身層寬除二就居中了，至于窗口上下居中我沒做到，固定了top等于滾動條隱去的 scrollTop加上50px;

當事件觸發(fā)這個類時，首先判斷一下兩個層是否已經(jīng)append到body里面，否則每次觸發(fā)它就一直增加增加了。設置了五個參數(shù)title、 content、width、height、cssName，它們分別定義了層標題、層內(nèi)內(nèi)容、層寬、層高、層內(nèi)容的樣式名。層內(nèi)內(nèi)容又設置了url、 text、id、iframe四種加載方式，通過ajax以get或post加載目標url的html內(nèi)容，text是直接在事件里寫入內(nèi)容，而id是取得頁面上某個id里面的html顯示到彈出層里，iframe都知道是在層里面以框架顯示目標url了。往往彈出層里面的內(nèi)容樣式也是各種各樣的，所以加了一個參數(shù)cssName，通過它就可以把層內(nèi)的內(nèi)容給排好了。

一，彈出層的html如下：

復制代碼代碼如下:

 
<div id="floatBoxBg"> 
<div id="floatBox" class="floatBox"> 
<div class="title"><h4>標題</h4><span>關閉</span></div> 
<div class="content">內(nèi)容</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"); 
} 

三，參數(shù)說明

順序	參數(shù)	功能	備注
1	title	彈出層的標題	必填，純文本
2	content	彈出層的內(nèi)容	:url	get或post某一頁面里的html，該頁面要求只包含body的子標簽
			:text	直接寫入內(nèi)容
			:id	顯示頁面里某id的子標簽
			:iframe	層內(nèi)內(nèi)容以框架顯示
3	width	彈出層的寬	必填，css值，比如“200px”
4	height	彈出層的高	如上，但是可用“auto”
5	cssName	彈出層的css	給id floatBox加入的樣式名，層內(nèi)樣式可以通過這個樣式名來定制