基于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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue实现记事本功能
Jun 26 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
linux下 C语言对 php 扩展
2008/12/14 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
img的onload的另类用法
2008/01/10 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
js实现汉字排序的方法
2015/07/23 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
AURALog面试题软件测试方面
2013/10/22 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
食品安全汇报材料
2014/08/18 职场文书
新郎接新娘保证书
2015/05/08 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python