在项目开发中，如果我们使用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}
