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闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JS中操作JSON总结
Dec 06 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
Oracle 常见问题解答
2006/10/09 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js单例模式的两种方案
2013/10/22 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python ORM编程基础示例
2020/02/02 Python
Python多线程的退出控制实现
2020/08/10 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
毕业生的自我鉴定
2013/10/29 职场文书
社团活动总结书
2014/06/27 职场文书
办公室日常管理制度
2015/08/04 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
MySQL查询日期时间
2022/05/15 MySQL