基于jQuery的弹出框插件


Posted in Javascript onMarch 18, 2012

html如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-1.7.min.js"></script> 
<script type="text/javascript" src="jquery-1.0.popwin.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#btn01").popwin({ 
element: "#box01", 
title: "请填写以下您的基本信息" 
}); 
$("#btn02").popwin({ 
element: "#box02", 
title: "请登陆" 
}); 
}) 
</script> 
<title>DEMO</title> 
</head> 
<body> 
<div id="box01"> 
<form action="" method="post" onsubmit="return check();"> 
姓名: 
<input type="text" size="30" name="username" id="username" onblur="return check();" value="" /><span id="nameErr"></span> 
<br /> 
<br /> 
密码: 
<input type="password" size="30" name="password" onblur="return check();" id="password" value="" /><span id="passwordErr"></span> 
<br /> 
<br /> 
邮箱: 
<input type="text" size="30" id="email" value="" onblur="return check();" /><span id="emailErr"></span> 
<br /> 
<br /> 
<input type="submit" value="确定" /> 
<input type="reset" value="取消" /> 
</form> 
</div> 
<div id="box02"> 
<form action="" method="post"> 
姓名: 
<input type="text" size="30" value="" /> 
<br /> 
<br /> 
密码: 
<input type="password" size="30" value="" /> 
<br /> 
<br /> 
<input type="submit" value="确定" /> 
<input type="reset" value="取消" /> 
</form> 
</div> 
<button value="注册" id="btn01">注册</button> 
<button value="登陆" id="btn02">登陆</button> 
</body> 
</html>

js插件如下:
/* 
* jquery.popwin.js 1.0 
* Copyright (c) gaoyubao 
* Date: 2012-01-12 
* 1.点击按钮,可以弹出你想弹出的内容,只要设置一下id,或者class 
2.浏览器窗口缩小的时候,弹出框始终是居中的 
3.按ESC间,可以关闭窗口 
*/ 
(function($) { 
var css='<style type="text/css">* {margin: 0;padding: 0;}#bg{background-color: #000; position: absolute; left:0; top:0;opacity: 0.5;filter:alpha(opacity=50);} #flagBox {position: absolute;border: 1px solid #000;background-color: #fff;z-index:2000;}#titleBox {padding: 5px;background-color:#fc0; overflow:hidden;} #titleBox p {font-weight: bold;} #titleBox a {float: right;} #htmlCode {padding: 10px;} span {font-size: 12px; color: #f00; margin-left: 10px;}</style>'; 
$("head").append(css); 
$.fn.popwin= function(options) { 
var settings={ 
element: "element", //哪一个弹出框,可以是id,或者是class 
width: 400, 
height: 200, 
title: "title" //弹出框的title 
} 
var s=$.extend(settings,options); 
var htmlCode=$(s.element).html(); 
$(s.element).remove(); 
$.a={ 
//设置背景的宽和高 
setBg: function() { 
var bh=$("body").height(),wh=$(window).height(),ww=$(window).width(); 
if(bh>wh) { 
wh=bh; 
} 
$("#bg").css({ 
width: ww, 
height: wh 
}); 
}, 
//设置弹出框居中 
setFlag: function() { 
var l=(document.documentElement.clientWidth-s.width)/2+"px", 
t=(document.documentElement.clientHeight-s.height)/2+"px"; 
$("#flagBox").css({ 
width: s.width, 
height: s.height, 
left: l, 
top: t 
}); 
}, 
//弹出框关闭 
setClose: function() { 
$("#container").remove(); 
} 
}; 
var html='<div id="container"><div id="bg"></div><div id="flagBox"><div id="titleBox"><a href="javascript:void(0)">close</a><p>'+s.title+'</p></div><div id="htmlCode">'+htmlCode+'</div></div></div>'; 
$(window).resize(function() {//调解窗口的大小 
$.a.setFlag(); 
}); 
return this.each(function() { 
$(this).bind("click",function(){ 
$("body").append(html); 
$("#titleBox a").click(function() { 
$.a.setClose(); 
}); 
$.a.setBg(); 
$.a.setFlag(); 
}); 
$(document).keydown(function(event) { 
if(event.which=="27") { 
$.a.setClose(); 
} 
}); 
}); 
}; 
})(jQuery) 
function isEmail(str) { 
var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/; 
if(reg.exec(str)) { 
return false; 
}else { 
return true; 
} 
} 
function check() { 
var flag=true; 
$("#nameErr").html(''); 
$("#passwordErr").html(''); 
$("#emailErr").html(''); 
var username=$("#username").val(); 
var password=$("#password").val(); 
var email=$("#email").val(); 
if(username=="" || username==null) { 
$("#nameErr").html("姓名不能为空"); 
flag=false; 
} 
if(password=="") { 
$("#passwordErr").html("密码不能为空"); 
flag=false; 
} 
if(email=="") { 
$("#emailErr").html("邮箱不能为空"); 
flag=false; 
}else if(isEmail(email)) { 
$("#emailErr").html("邮箱格式错误"); 
flag=false; 
} 
return flag; 
}
Javascript 相关文章推荐
js自动下载文件到本地的实现代码
Apr 28 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 #Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 #Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 #Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 #Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 #Javascript
jquery $.ajax相关用法分享
Mar 16 #Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 #Javascript
You might like
提问的智慧
2006/10/09 PHP
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
校园十大歌手策划书
2014/02/01 职场文书
家具促销活动方案
2014/02/16 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014年外联部工作总结
2014/11/17 职场文书
见习期个人总结
2015/03/05 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Oracle 触发器trigger使用案例
2022/02/24 Oracle
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers