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实现轮显新闻标题链接
Aug 13 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
UI Events 用户界面事件
Jun 27 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
javascript实现手动点赞效果
Apr 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
如何在PHP中使用数组
2020/06/09 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python实现微信自动回复功能
2018/04/11 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
入党推优材料
2014/06/02 职场文书
护士工作失误检讨书
2014/09/14 职场文书