基于jQuery的弹出框插件

有时候在做项目时，会遇到点击按钮或者文字是，弹出一个对话框，为了方便，自己就动手写了一个这样的一个插件，方便以后使用。

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>

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

效果下载地址：demo下载