基于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
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
收音机指标测试方法及仪器
2021/03/01 无线电
PHP实现下载功能的代码
2012/09/29 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python @property原理解析和用法实例
2020/02/11 Python
python访问hdfs的操作
2020/06/06 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
小班开学寄语
2014/04/04 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
优秀纪检干部材料
2014/08/27 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
追悼会答谢词
2015/01/05 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript