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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
jQuery入门知识简介
Mar 04 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
js实现简单模态框实例
Nov 16 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python实现简单遗传算法
2018/03/19 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Python修改列表值问题解决方案
2020/03/06 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
结构工程研究生求职信
2013/10/13 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
python flappy bird小游戏分步实现流程
2022/02/15 Python