有时候在做项目时，会遇到点击按钮或者文字是，弹出一个对话框，为了方便，自己就动手写了一个这样的一个插件，方便以后使用。
html如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="jquery-1.7.min.js"></script>
6 <script type="text/javascript" src="jquery-1.0.popwin.js"></script>
7 <script type="text/javascript">
8 $(function() {
9 $("#btn01").popwin({
10 element: "#box01",
11 title: "请填写以下您的基本信息"
12 });
13
14 $("#btn02").popwin({
15 element: "#box02",
16 title: "请登陆"
17 });
18
19 })
20 </script>
21
22 <title>DEMO</title>
23 </head>
24
25 <body>
26 <div id="box01">
27 <form action="" method="post" onsubmit="return check();">
28 姓名：
29 <input type="text" size="30" name="username" id="username" onblur="return check();" value="" /><span id="nameErr"></span>
30 <br />
31 <br />
32 密码：
33 <input type="password" size="30" name="password" onblur="return check();" id="password" value="" /><span id="passwordErr"></span>
34 <br />
35 <br />
36 邮箱：
37 <input type="text" size="30" id="email" value="" onblur="return check();" /><span id="emailErr"></span>
38 <br />
39 <br />
40 <input type="submit" value="确定" />
41 <input type="reset" value="取消" />
42 </form>
43 </div>
44 <div id="box02">
45 <form action="" method="post">
46 姓名：
47 <input type="text" size="30" value="" />
48 <br />
49 <br />
50 密码：
51 <input type="password" size="30" value="" />
52 <br />
53 <br />
54 <input type="submit" value="确定" />
55 <input type="reset" value="取消" />
56 </form>
57 </div>
58
59 <button value="注册" id="btn01">注册</button>
60 <button value="登陆" id="btn02">登陆</button>
61 </body>
62 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="jquery-1.7.min.js"></script>
6 <script type="text/javascript" src="jquery-1.0.popwin.js"></script>
7 <script type="text/javascript">
8 $(function() {
9 $("#btn01").popwin({
10 element: "#box01",
11 title: "请填写以下您的基本信息"
12 });
13
14 $("#btn02").popwin({
15 element: "#box02",
16 title: "请登陆"
17 });
18
19 })
20 </script>
21
22 <title>DEMO</title>
23 </head>
24
25 <body>
26 <div id="box01">
27 <form action="" method="post" onsubmit="return check();">
28 姓名：
29 <input type="text" size="30" name="username" id="username" onblur="return check();" value="" /><span id="nameErr"></span>
30 <br />
31 <br />
32 密码：
33 <input type="password" size="30" name="password" onblur="return check();" id="password" value="" /><span id="passwordErr"></span>
34 <br />
35 <br />
36 邮箱：
37 <input type="text" size="30" id="email" value="" onblur="return check();" /><span id="emailErr"></span>
38 <br />
39 <br />
40 <input type="submit" value="确定" />
41 <input type="reset" value="取消" />
42 </form>
43 </div>
44 <div id="box02">
45 <form action="" method="post">
46 姓名：
47 <input type="text" size="30" value="" />
48 <br />
49 <br />
50 密码：
51 <input type="password" size="30" value="" />
52 <br />
53 <br />
54 <input type="submit" value="确定" />
55 <input type="reset" value="取消" />
56 </form>
57 </div>
58
59 <button value="注册" id="btn01">注册</button>
60 <button value="登陆" id="btn02">登陆</button>
61 </body>
62 </html>
js插件如下:
1 /*
2
3 * jquery.popwin.js 1.0
4
5 * Copyright (c) gaoyubao
6
7 * Date: 2012-01-12
8
9 * 1.点击按钮，可以弹出你想弹出的内容，只要设置一下id,或者class
10 2.浏览器窗口缩小的时候，弹出框始终是居中的
11 3.按ESC间，可以关闭窗口
12 */
13
14 (function($) {
15 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>';
16
17 $("head").append(css);
18
19 $.fn.popwin= function(options) {
20 var settings={
21 element: "element", //哪一个弹出框，可以是id，或者是class
22 400,
23 height: 200,
24 title: "title" //弹出框的title
25 }
26
27 var s=$.extend(settings,options);
28
29 var htmlCode=$(s.element).html();
30
31 $(s.element).remove();
32
33
34 $.a={
35 //设置背景的宽和高
36 setBg: function() {
37 var bh=$("body").height(),wh=$(window).height(),ww=$(window).width();
38
39 if(bh>wh) {
40 wh=bh;
41 }
42
43 $("#bg").css({
44 ww,
45 height: wh
46 });
47 },
48
49 //设置弹出框居中
50 setFlag: function() {
51 var l=(document.documentElement.clientWidth-s.width)/2+"px",
52 t=(document.documentElement.clientHeight-s.height)/2+"px";
53
54 $("#flagBox").css({
55 s.width,
56 height: s.height,
57 left: l,
58 top: t
59 });
60 },
61
62 //弹出框关闭
63 setClose: function() {
64 $("#container").remove();
65 }
66 };
67
68 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>';
69
70 $(window).resize(function() {//调解窗口的大小
71 $.a.setFlag();
72 });
73
74 return this.each(function() {
75 $(this).bind("click",function(){
76 $("body").append(html);
77
78 $("#titleBox a").click(function() {
79 $.a.setClose();
80 });
81
82 $.a.setBg();
83 $.a.setFlag();
84 });
85
86 $(document).keydown(function(event) {
87 if(event.which=="27") {
88 $.a.setClose();
89 }
90 });
91
92 });
93 };
94 })(jQuery)
95
96 function isEmail(str) {
97 var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;
98 if(reg.exec(str)) {
99 return false;
100 }else {
101 return true;
102 }
103 }
104
105 function check() {
106 var flag=true;
107
108 $("#nameErr").html('');
109 $("#passwordErr").html('');
110 $("#emailErr").html('');
111
112 var username=$("#username").val();
113 var password=$("#password").val();
114 var email=$("#email").val();
115
116 if(username=="" || username==null) {
117 $("#nameErr").html("姓名不能为空");
118 flag=false;
119 }
120
121 if(password=="") {
122 $("#passwordErr").html("密码不能为空");
123 flag=false;
124 }
125
126 if(email=="") {
127 $("#emailErr").html("邮箱不能为空");
128 flag=false;
129 }else if(isEmail(email)) {
130 $("#emailErr").html("邮箱格式错误");
131 flag=false;
132 }
133 return flag;
134
2
3 * jquery.popwin.js 1.0
4
5 * Copyright (c) gaoyubao
6
7 * Date: 2012-01-12
8
9 * 1.点击按钮，可以弹出你想弹出的内容，只要设置一下id,或者class
10 2.浏览器窗口缩小的时候，弹出框始终是居中的
11 3.按ESC间，可以关闭窗口
12 */
13
14 (function($) {
15 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>';
16
17 $("head").append(css);
18
19 $.fn.popwin= function(options) {
20 var settings={
21 element: "element", //哪一个弹出框，可以是id，或者是class
22 400,
23 height: 200,
24 title: "title" //弹出框的title
25 }
26
27 var s=$.extend(settings,options);
28
29 var htmlCode=$(s.element).html();
30
31 $(s.element).remove();
32
33
34 $.a={
35 //设置背景的宽和高
36 setBg: function() {
37 var bh=$("body").height(),wh=$(window).height(),ww=$(window).width();
38
39 if(bh>wh) {
40 wh=bh;
41 }
42
43 $("#bg").css({
44 ww,
45 height: wh
46 });
47 },
48
49 //设置弹出框居中
50 setFlag: function() {
51 var l=(document.documentElement.clientWidth-s.width)/2+"px",
52 t=(document.documentElement.clientHeight-s.height)/2+"px";
53
54 $("#flagBox").css({
55 s.width,
56 height: s.height,
57 left: l,
58 top: t
59 });
60 },
61
62 //弹出框关闭
63 setClose: function() {
64 $("#container").remove();
65 }
66 };
67
68 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>';
69
70 $(window).resize(function() {//调解窗口的大小
71 $.a.setFlag();
72 });
73
74 return this.each(function() {
75 $(this).bind("click",function(){
76 $("body").append(html);
77
78 $("#titleBox a").click(function() {
79 $.a.setClose();
80 });
81
82 $.a.setBg();
83 $.a.setFlag();
84 });
85
86 $(document).keydown(function(event) {
87 if(event.which=="27") {
88 $.a.setClose();
89 }
90 });
91
92 });
93 };
94 })(jQuery)
95
96 function isEmail(str) {
97 var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;
98 if(reg.exec(str)) {
99 return false;
100 }else {
101 return true;
102 }
103 }
104
105 function check() {
106 var flag=true;
107
108 $("#nameErr").html('');
109 $("#passwordErr").html('');
110 $("#emailErr").html('');
111
112 var username=$("#username").val();
113 var password=$("#password").val();
114 var email=$("#email").val();
115
116 if(username=="" || username==null) {
117 $("#nameErr").html("姓名不能为空");
118 flag=false;
119 }
120
121 if(password=="") {
122 $("#passwordErr").html("密码不能为空");
123 flag=false;
124 }
125
126 if(email=="") {
127 $("#emailErr").html("邮箱不能为空");
128 flag=false;
129 }else if(isEmail(email)) {
130 $("#emailErr").html("邮箱格式错误");
131 flag=false;
132 }
133 return flag;
134
1 /*
2
3 * jquery.popwin.js 1.0
4
5 * Copyright (c) gaoyubao
6
7 * Date: 2012-01-12
8
9 * 1.点击按钮，可以弹出你想弹出的内容，只要设置一下id,或者class
10 2.浏览器窗口缩小的时候，弹出框始终是居中的
11 3.按ESC间，可以关闭窗口
12 */
13
14 (function($) {
15 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>';
16
17 $("head").append(css);
18
19 $.fn.popwin= function(options) {
20 var settings={
21 element: "element", //哪一个弹出框，可以是id，或者是class
22 400,
23 height: 200,
24 title: "title" //弹出框的title
25 }
26
27 var s=$.extend(settings,options);
28
29 var htmlCode=$(s.element).html();
30
31 $(s.element).remove();
32
33
34 $.a={
35 //设置背景的宽和高
36 setBg: function() {
37 var bh=$("body").height(),wh=$(window).height(),ww=$(window).width();
38
39 if(bh>wh) {
40 wh=bh;
41 }
42
43 $("#bg").css({
44 ww,
45 height: wh
46 });
47 },
48
49 //设置弹出框居中
50 setFlag: function() {
51 var l=(document.documentElement.clientWidth-s.width)/2+"px",
52 t=(document.documentElement.clientHeight-s.height)/2+"px";
53
54 $("#flagBox").css({
55 s.width,
56 height: s.height,
57 left: l,
58 top: t
59 });
60 },
61
62 //弹出框关闭
63 setClose: function() {
64 $("#container").remove();
65 }
66 };
67
68 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>';
69
70 $(window).resize(function() {//调解窗口的大小
71 $.a.setFlag();
72 });
73
74 return this.each(function() {
75 $(this).bind("click",function(){
76 $("body").append(html);
77
78 $("#titleBox a").click(function() {
79 $.a.setClose();
80 });
81
82 $.a.setBg();
83 $.a.setFlag();
84 });
85
86 $(document).keydown(function(event) {
87 if(event.which=="27") {
88 $.a.setClose();
89 }
90 });
91
92 });
93 };
94 })(jQuery)
95
96 function isEmail(str) {
97 var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;
98 if(reg.exec(str)) {
99 return false;
100 }else {
101 return true;
102 }
103 }
104
105 function check() {
106 var flag=true;
107
108 $("#nameErr").html('');
109 $("#passwordErr").html('');
110 $("#emailErr").html('');
111
112 var username=$("#username").val();
113 var password=$("#password").val();
114 var email=$("#email").val();
115
116 if(username=="" || username==null) {
117 $("#nameErr").html("姓名不能为空");
118 flag=false;
119 }
120
121 if(password=="") {
122 $("#passwordErr").html("密码不能为空");
123 flag=false;
124 }
125
126 if(email=="") {
127 $("#emailErr").html("邮箱不能为空");
128 flag=false;
129 }else if(isEmail(email)) {
130 $("#emailErr").html("邮箱格式错误");
131 flag=false;
132 }
133 return flag;
134 }
2
3 * jquery.popwin.js 1.0
4
5 * Copyright (c) gaoyubao
6
7 * Date: 2012-01-12
8
9 * 1.点击按钮，可以弹出你想弹出的内容，只要设置一下id,或者class
10 2.浏览器窗口缩小的时候，弹出框始终是居中的
11 3.按ESC间，可以关闭窗口
12 */
13
14 (function($) {
15 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>';
16
17 $("head").append(css);
18
19 $.fn.popwin= function(options) {
20 var settings={
21 element: "element", //哪一个弹出框，可以是id，或者是class
22 400,
23 height: 200,
24 title: "title" //弹出框的title
25 }
26
27 var s=$.extend(settings,options);
28
29 var htmlCode=$(s.element).html();
30
31 $(s.element).remove();
32
33
34 $.a={
35 //设置背景的宽和高
36 setBg: function() {
37 var bh=$("body").height(),wh=$(window).height(),ww=$(window).width();
38
39 if(bh>wh) {
40 wh=bh;
41 }
42
43 $("#bg").css({
44 ww,
45 height: wh
46 });
47 },
48
49 //设置弹出框居中
50 setFlag: function() {
51 var l=(document.documentElement.clientWidth-s.width)/2+"px",
52 t=(document.documentElement.clientHeight-s.height)/2+"px";
53
54 $("#flagBox").css({
55 s.width,
56 height: s.height,
57 left: l,
58 top: t
59 });
60 },
61
62 //弹出框关闭
63 setClose: function() {
64 $("#container").remove();
65 }
66 };
67
68 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>';
69
70 $(window).resize(function() {//调解窗口的大小
71 $.a.setFlag();
72 });
73
74 return this.each(function() {
75 $(this).bind("click",function(){
76 $("body").append(html);
77
78 $("#titleBox a").click(function() {
79 $.a.setClose();
80 });
81
82 $.a.setBg();
83 $.a.setFlag();
84 });
85
86 $(document).keydown(function(event) {
87 if(event.which=="27") {
88 $.a.setClose();
89 }
90 });
91
92 });
93 };
94 })(jQuery)
95
96 function isEmail(str) {
97 var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;
98 if(reg.exec(str)) {
99 return false;
100 }else {
101 return true;
102 }
103 }
104
105 function check() {
106 var flag=true;
107
108 $("#nameErr").html('');
109 $("#passwordErr").html('');
110 $("#emailErr").html('');
111
112 var username=$("#username").val();
113 var password=$("#password").val();
114 var email=$("#email").val();
115
116 if(username=="" || username==null) {
117 $("#nameErr").html("姓名不能为空");
118 flag=false;
119 }
120
121 if(password=="") {
122 $("#passwordErr").html("密码不能为空");
123 flag=false;
124 }
125
126 if(email=="") {
127 $("#emailErr").html("邮箱不能为空");
128 flag=false;
129 }else if(isEmail(email)) {
130 $("#emailErr").html("邮箱格式错误");
131 flag=false;
132 }
133 return flag;
134 }
效果下载地址：demo下载