Jquery实现自定义弹窗

在项目开发中,如果我们使用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>
整个功能的代码都在这里了


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。