Jquery实现自定义弹窗示例

在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，直接用代码说话。

这里我将html、css、jquery代码分别贴出来

html部分：

. 代码如下:

<button id="show" class="alter">弹窗</button>
<!-- 弹窗部分-->
<p class="box">
<p class="box_content">
<p class="title">
<h3>登录腾虎通行证</h3>
<h2 id="close">×</h2>
</p>
<p 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>
</p>
<p style="width:100%;border-bottom:1px solid #eeeeee"></p>
<p class="other">
<p>可以使用一下方式登录</p>
<ul>
<li>qq</li>
<li>msn</li>
<li></li>
</ul>
</p>
</p>
</p>

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="https://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;//当鼠标按在该p上的时间将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>

整个功能的代码都在这里了