jquery 彈出登錄窗口實(shí)現(xiàn)代碼
更新時(shí)間:2009年12月24日 02:14:47 作者:
結(jié)構(gòu)定義了兩個(gè)層,一個(gè)為半透明的背景層,一個(gè)是彈出層主要結(jié)構(gòu),都設(shè)為浮動(dòng)position:absolute;背景層遮掉所有body內(nèi)容很容 易做到。
主要層左右居中,設(shè)置left等于窗口寬除二減去自身層寬除二就居中了,至于窗口上下居中我沒(méi)做到,固定了top等于滾動(dòng)條隱去的 scrollTop加上50px;
當(dāng)事件觸發(fā)這個(gè)類時(shí),首先判斷一下兩個(gè)層是否已經(jīng)append到body里面,否則每次觸發(fā)它就一直增加增加了。設(shè)置了五個(gè)參數(shù)title、 content、width、height、cssName,它們分別定義了層標(biāo)題、層內(nèi)內(nèi)容、層寬、層高、層內(nèi)容的樣式名。層內(nèi)內(nèi)容又設(shè)置了url、 text、id、iframe四種加載方式,通過(guò)ajax以get或post加載目標(biāo)url的html內(nèi)容,text是直接在事件里寫(xiě)入內(nèi)容,而id是取 得頁(yè)面上某個(gè)id里面的html顯示到彈出層里,iframe都知道是在層里面以框架顯示目標(biāo)url了。往往彈出層里面的內(nèi)容樣式也是各種各樣的,所以加 了一個(gè)參數(shù)cssName,通過(guò)它就可以把層內(nèi)的內(nèi)容給排好了。

一,彈出層的html如下:
<div id="floatBoxBg">
<div id="floatBox" class="floatBox">
<div class="title"><h4>標(biāo)題</h4><span>關(guān)閉</span></div>
<div class="content">內(nèi)容</div>
</div>
</div>
其對(duì)應(yīng)樣式如下:
#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ù)說(shuō)明
四,應(yīng)用
dialog(title,content,width,height,cssName);
當(dāng)事件觸發(fā)這個(gè)類時(shí),首先判斷一下兩個(gè)層是否已經(jīng)append到body里面,否則每次觸發(fā)它就一直增加增加了。設(shè)置了五個(gè)參數(shù)title、 content、width、height、cssName,它們分別定義了層標(biāo)題、層內(nèi)內(nèi)容、層寬、層高、層內(nèi)容的樣式名。層內(nèi)內(nèi)容又設(shè)置了url、 text、id、iframe四種加載方式,通過(guò)ajax以get或post加載目標(biāo)url的html內(nèi)容,text是直接在事件里寫(xiě)入內(nèi)容,而id是取 得頁(yè)面上某個(gè)id里面的html顯示到彈出層里,iframe都知道是在層里面以框架顯示目標(biāo)url了。往往彈出層里面的內(nèi)容樣式也是各種各樣的,所以加 了一個(gè)參數(shù)cssName,通過(guò)它就可以把層內(nèi)的內(nèi)容給排好了。

一,彈出層的html如下:
復(fù)制代碼 代碼如下:
<div id="floatBoxBg">
<div id="floatBox" class="floatBox">
<div class="title"><h4>標(biāo)題</h4><span>關(guān)閉</span></div>
<div class="content">內(nèi)容</div>
</div>
</div>
其對(duì)應(yīng)樣式如下:
復(fù)制代碼 代碼如下:
#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文件如下:
復(fù)制代碼 代碼如下:
// 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ù)說(shuō)明
順序 | 參數(shù) | 功能 | 備注 | |
---|---|---|---|---|
1 | title | 彈出層的標(biāo)題 | 必填,純文本 | |
2 | content | 彈出層的內(nèi)容 | :url | get或post某一頁(yè)面里的html,該頁(yè)面要求只包含body的子標(biāo)簽 |
:text | 直接寫(xiě)入內(nèi)容 | |||
:id | 顯示頁(yè)面里某id的子標(biāo)簽 | |||
:iframe | 層內(nèi)內(nèi)容以框架顯示 | |||
3 | width | 彈出層的寬 | 必填,css值,比如“200px” | |
4 | height | 彈出層的高 | 如上,但是可用“auto” | |
5 | cssName | 彈出層的css | 給id floatBox加入的樣式名,層內(nèi)樣式可以通過(guò)這個(gè)樣式名來(lái)定制 |
四,應(yīng)用
dialog(title,content,width,height,cssName);
您可能感興趣的文章:
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- 基于jquery ajax 用戶無(wú)刷新登錄方法詳解
- 基于Jquery+div+css實(shí)現(xiàn)彈出登錄窗口(代碼超簡(jiǎn)單)
- JQuery記住用戶名密碼實(shí)現(xiàn)下次自動(dòng)登錄功能
- 使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊(cè)表單
- jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷
相關(guān)文章
jQuery刪除節(jié)點(diǎn)用法示例(remove方法)
這篇文章主要介紹了jQuery刪除節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了remove方法進(jìn)行頁(yè)面元素刪除的相關(guān)使用技巧,需要的朋友可以參考下2016-09-09Jquery在IE7下無(wú)法使用 $.ajax解決方法
今天在做系統(tǒng)測(cè)試的時(shí)候,原本用Jquery寫(xiě)了一個(gè)動(dòng)態(tài)加載的樹(shù)形菜單,發(fā)現(xiàn)在IE7下無(wú)法加載數(shù)據(jù),(采用的是jquery1.3.2版本的$.ajax方法),上網(wǎng)查詢到原來(lái)是IE7的執(zhí)行ajax是用XMLHTTPRequest來(lái)聲明的,經(jīng)過(guò)對(duì)比果然如此;后采用以下的方法隨即解決了問(wèn)題。2009-11-11jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果,根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能,需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09jquery,js簡(jiǎn)單實(shí)現(xiàn)類似Angular.js雙向綁定
本文主要介紹了jquery,js簡(jiǎn)單實(shí)現(xiàn)類似Angular.js雙向綁定的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jquery js 獲取時(shí)間差、時(shí)間格式具體代碼
獲取獲得時(shí)間差、時(shí)間格式的方法有很多,下面為大家介紹下使用jquery及js實(shí)現(xiàn)的功能代碼2013-06-06jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法,基于jquery.md5.js插件實(shí)現(xiàn)md5加密功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-03-03節(jié)點(diǎn)的插入之a(chǎn)ppend()和appendTo()的用法介紹
說(shuō)到節(jié)點(diǎn)的插入想必大家對(duì)append()和appendTo()的用法并不陌生吧,下面有個(gè)不錯(cuò)的是,希望對(duì)大家學(xué)習(xí)有所幫助2014-01-01