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 相关文章推荐
popdiv
Jul 14 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
帝国cms常用标签汇总
2015/07/06 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JS添加删除DIV的简单实例
2016/07/08 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
React优化子组件render的使用
2019/05/12 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
自荐信范文
2013/12/10 职场文书
保险公司早会主持词
2014/03/22 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书