Jquery实现自定义弹窗示例


Posted in Javascript onMarch 12, 2014

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

整个功能的代码都在这里了
Javascript 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 #Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 #Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 #Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
Javascript加载速度慢的解决方案
Mar 11 #Javascript
js解析json读取List中的实体对象示例
Mar 11 #Javascript
JS图片无缝、平滑滚动代码
Mar 11 #Javascript
You might like
PHP:风雨欲来 路在何方?
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
JS模拟多线程
2007/02/07 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python绘制动态曲线教程
2020/02/24 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
保健品市场营销方案
2014/03/31 职场文书
宣传普通话标语
2014/06/27 职场文书
民政局个人整改措施
2014/09/24 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
世界环境日活动总结
2015/02/11 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
八年级作文之友情
2019/11/25 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle