基于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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
编写v-for循环的技巧汇总
Dec 01 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
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js几个验证函数代码
2010/03/25 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
spyder常用快捷键(分享)
2017/07/19 Python
python机器学习库常用汇总
2017/11/15 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
keras得到每层的系数方式
2020/06/15 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
建筑个人求职信范文
2014/01/25 职场文书
卫生系统先进事迹
2014/05/13 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
旷课检讨书范文
2015/01/27 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python