基于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 插件学习(三)
Aug 06 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
使用console进行性能测试
Apr 27 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JS重学系列之聊聊new操作符
Mar 04 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的大小写敏感问题整理
2011/12/29 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
如何基于Python按行合并两个txt
2020/11/03 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
一道SQL存储过程面试题
2016/10/07 面试题
生日派对邀请函
2014/01/13 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
新郎结婚感言
2015/07/31 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server