在項目開發中，如果我們使用javascript自帶的提示對話框，感覺不怎麼美觀，所以我們通常都是自己定義一些對話框，這裡我實現點擊按鈕就彈窗一個登錄的窗口，點擊該窗口並可以實現拖拽功能，太多文字的東西說不清楚，直接用代碼說話。
這裡我將HTML、CSS、Jquery代碼分別貼出來
HTML部分：
. 代碼如下:
<button id="show" class="alter">彈窗</button>
<!-- 彈窗部分-->
<div class="box">
<div class="box_content">
<div class="title">
<h3>登錄騰虎通行證</h3>
<h2 id="close">×</h2>
</div>
<div class="content">
<table border="0" cellpadding="0" cellspacing="0">
<tr height="60px">
<td colspan="2">
<p class="prompt" id="username_p">請輸入用戶名</p>
<input type="text" class="inputstyle ins" id="username"/>
</td>
</tr>
<tr height="60px">
<td colspan="2">
<p class="prompt" id="pwd_p">請輸入密碼</p>
<input type="password" class="inputstyle ins" id="pwd"/>
</td>
</tr>
<tr height="30px">
<td align="left"><input type="checkbox" checked="checked"/> 下次自動登錄</td>
<td align="right"><a href="#">忘記密碼？</a></td>
</tr>
<tr height="60px">
<td colspan="2"><input type="submit" value="登錄" class="inputstyle login" id="login"/></td>
</tr>
<tr height="30px">
<td colspan="2" align="right"><a href="#">立即注冊</a></td>
</tr>
</table>
</div>
<p style="width:100%;border-bottom:1px solid #EEEEEE"></p>
<div class="other">
<p>可以使用一下方式登錄</p>
<ul>
<li>QQ</li>
<li>MSN</li>
<li></li>
</ul>
</div>
</div>
</div>
CSS部分代碼：
. 代碼如下:
<style type="text/css">
*{margin:0px;padding:0px;color:#555555;}
.alter{width:50px;height:30px;margin:10px}
.box{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background: -moz-linear-gradient(rgba(11,11,11,0.5), rgba(11,11,11,0.1)) repeat-x rgba(11,11,11,0.1);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.1))) repeat-x rgba(11,11,11,0.1);
z-index:100000;
display:none;
}
.box_content{
height:420px;
width:350px;
background:white;
position:fixed;
top:0;
left:0;
}
.box_content .title{
height:45px;
width:100%;
background:#EEEEEE;
line-height:45px;
overflow:hidden;
}
.title:hover{cursor: move;}
.title h3{float:left;margin-left:20px;}
.title h2{float:right;margin-right:15px;color:#999999}
.title h2:hover{color:#444444;cursor:pointer}
.box_content .content,.other{margin:20px 20px 10px 20px;overflow:hidden;font:normal 14px "宋體";}
.content table{width:99%;}
.content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;}
.content .inputstyle{font:bold 18px/35px "宋體";}
.content a{
text-decoration: none;
color:#1B66C7
}
.content a:hover{text-decoration: underline;}
.content table .login{
height:45px;width:101%;
border:none;
background:#4490F7;
color:#FFFFFF;
font:bold 17px "宋體";
border-radius:4px;
}
.content table .login:hover{
background:#559BFC;
}
.content .prompt{
color:#999999;
position:absolute;
line-height:38px;
}
.box_content .other{font:normal 14px "宋體";}
.other ul{
list-style:none;
margin-top:15px;
}
.other ul li{
float:left;
height:30px;
width:30px;
margin-right:15px;
border-radius:20px;
background:#1B66C7;
color:white;
text-align:center;
line-height:30px
}
</style>
Jquery代碼：
. 代碼如下:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
BoxInit.init();
});
var BoxInit={
wWidth:undefined,//浏覽器寬度
wHeight:undefined,//浏覽器高度
show:undefined,//顯示按鈕
box:undefined,//彈窗遮蓋屬性
boxContent:undefined,//彈窗屬性
closeBox:undefined,//關閉按鈕屬性
loginBtn:undefined,//登錄按鈕屬性
init:function(){
var self=this;
//獲取控件對象
self.show=$("#show");
self.box=$(".box");
self.boxContent=$(".box_content");
self.closeBox=$("#close");
self.loginBtn=$("#login");
//獲取浏覽器可視化的寬高
self.wWidth=$(window).width();
self.wHeight=$(window).height();
//綁定顯示按鈕點擊事件
self.show.click(function(){self.showBtn()});
//綁定關閉按鈕事件
self.closeBox.click(function(){self.closes()});
//綁定登錄按鈕
self.loginBtn.click(function(){self.login()});
//DIV拖拽
self.dragDrop();
//調用控制提示信息
self.controlPromptInfo();
},
/**
*顯示按鈕
*/
showBtn:function(){
var self=this;
self.box.animate({"width":self.wWidth,"height":self.wHeight},function(){
//設置彈窗的位置
self.boxContent.animate({
"left":(self.wWidth-self.boxContent.width())/2
},function(){
$(this).animate({"top":(self.wHeight-self.boxContent.height())/2});
});
});
},
/**
*關閉按鈕
*/
closes:function(){
var self=this;
self.boxContent.animate({
"top":0
},function(){
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){
self.box.animate({"width":-self.wWidth,"height":-self.wHeight});
});
});
},
/**
*登錄按鈕
*/
login:function(){
var self=this;
self.boxContent.animate({
"top":0
},function(){
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){
self.box.animate({"width":-self.wWidth,"height":-self.wHeight});
});
});
},
/**
*拖拽彈窗
*/
dragDrop:function(){
var self=this;
var move=false;//標識是否移動元素
var offsetX=0;//彈窗到浏覽器left的寬度
var offsetY=0;//彈出到浏覽器top的寬度
var title=$(".title");
//鼠標按下事件
title.mousedown(function(){
move=true;//當鼠標按在該div上的時間將move屬性設置為true
offsetX=event.offsetX;//獲取鼠標在當前窗口的相對偏移位置的Left值並賦值給offsetX
offsetY=event.offsetY;//獲取鼠標在當前窗口的相對偏移位置的Top值並賦值給offsetY
title.css({"cursor":"move"});
}).mouseup(function(){
//當鼠標松開的時候將move屬性攝hi為false
move=false;
});
$(document).mousemove(function(){
if(!move){//如果move屬性不為true，就不執行下面的代碼
return;
}
//move為true的時候執行下面代碼
var x = event.clientX-offsetX; //event.clientX得到鼠標相對於客戶端正文區域的偏移，然後減去offsetX即得到當前推拽元素相對於當前窗口的X值（減去鼠標剛開始拖動的時候在當前窗口的偏移X）
var y = event.clientY-offsetY; //event.clientY得到鼠標相對於客戶端正文區域的偏移，然後減去offsetX即得到當前推拽元素相對於當前窗口的Y值（減去鼠標剛開始拖動的時候在當前窗口的偏移Y）
if(!(x<0||y<0||x>(self.wWidth-self.boxContent.width())||y>(self.wHeight-self.boxContent.height()))){
self.boxContent.css({"left":x,"top":y,"cursor":"move"});
}
});
},
/**
*控制提示信息
*/
controlPromptInfo:function(){
//遍歷提示信息，並點擊
$("p[class*=prompt]").each(function(){
var pro=$(this);
pro.click(function(){
//點擊提示信息自身隱藏，文本框獲取焦點
pro.hide().siblings("input").focus();
});
});
//遍歷文本框
$("input[class*=ins]").each(function(){
var input=$(this);
//文本框失去焦點
input.blur(function(){
//如果文本框值為空
if(input.val()==""){
//顯示提示信息
input.siblings(".prompt").show();
}
}).keyup(function(){//按鍵抬起的時候
if(input.val()==""){//如果文本框值為空
//文本框失去焦點顯示提示信息
input.blur().siblings(".prompt").show();
}else{
//提示信息隱藏
input.siblings(".prompt").hide();
}
});
});
}
}
</script>
整個功能的代碼都在這裡了