最近写的一个弹窗插件

  1 /*
  2 *selfWindow组建，主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
  3 *因为给予移动web，所以没有兼容低版本ie
  4 *调用方法：var win = new SelfWinsow({
  5 *                    types : "confirm",//这里可以选择的参数有，alert,confirm,confirm2,link
  6 *                    slefTitle : "香送网温馨提示",//弹窗标题
  7 *                    selfInfo : "Are you really to remove this tool?",//弹窗信息
  8 *                    selfOk : "YES",//自定义确定按钮文字
  9 *                    selfNo : "NO",//自定义否认按钮文字
 10 *                    callback:fn,//当types为confirm,confirm2或者是talk时的回调函数，confirm为模拟传统的confirm弹窗，confirm2根据只需要一个按钮的需求定制的，talk则是模拟传统的prompt窗口
 11 *                    linkTo1:"http://blog.sina.com.cn/s/blog_a261421801017wgo.html",//当types为link时第一个按钮的链接
 12 *                    linkTo1:"http://blog.sina.com.cn/s/blog_a261421801017wgo.html",//当types为link时第二个按钮的链接
 13 *            })
 14 *如果不传任何参数，或者配置直接为一个字符串，将默认调用alert,如 new selfWinson() 或者 new selfWinsow("你确定要离开吗？")
 15 *组建还有很多需要改进的地方，欢迎提出改进建议
 16 *开发者：农的传人
 17 *开发者邮箱：546066468@qq.com
 18 */
 19 
 20 var SelfWinsow = function(settings){this.init(settings)};
 21 SelfWinsow.prototype = {
 22     init:function(settings){ 
 23         this.opts = {
 24             types : "alert",
 25             slefTitle : "香送网温馨提示",
 26             selfInfo : typeof settings == "string" ? settings : "相送网温馨提示",
 27             selfOk : "确定",
 28             selfNo : "不"
 29         };
 30         
 31         this.setting(settings);
 32         if(typeof settings == "string"){
 33             this.opts.selfInfo == settings;
 34         }
 35         if(settings == "" || settings == undefined || settings == null){
 36             this.selfAlert();    
 37         }else if(settings.types == "confirm"){
 38             this.selfConfirm();
 39         }else if(settings.types == "confirm2"){
 40             this.selfConfirm2();
 41         }else if(settings.types == "link"){
 42             this.selfLink();
 43         }else if(settings.types=="talk"){
 44             this.selfMobileTalk();
 45         }else{
 46             this.selfAlert();
 47         }
 48     },
 49     //confirm窗口
 50     selfConfirm:function(){
 51         var _this = this;
 52         var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfOk+"<\/div><div id=‘selfNo‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfNo+"<\/div><\/div>";
 53         this.createMask(html);
 54         this.selfEvents();
 55     },
 56     
 57     //alert窗口
 58     selfAlert:function(){
 59         var _this = this;
 60         var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtSingle‘>"+_this.opts.selfOk+"<\/div><\/div>";
 61         this.createMask(html);
 62         this.selfEvents();
 63     },
 64     selfConfirm2:function(){
 65         var _this = this;
 66         var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtSingle‘>"+_this.opts.selfOk+"<\/div><\/div>";
 67         this.createMask(html);
 68         this.selfEvents();
 69     },
 70     //带链接窗口
 71     selfLink:function(){
 72         var _this = this;
 73         var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><a id=‘selfOk‘ href=‘"+_this.opts.linkTo1+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfOk+"<\/a><a id=‘linkTo2‘ href=‘"+_this.opts.linkTo2+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfNo+"<\/div><\/div>";
 74         this.createMask(html);
 75         this.selfEvents();
 76     },
 77     
 78     selfMobileTalk:function(){
 79         var _this = this;
 80         var html="<div id=‘selfWinsow‘ style=‘width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px‘><h2 style=‘text-align:center; background:#fff‘ id=‘slefTitle‘><span id=‘selfNo‘ style=‘background:#fff;cursor: pointer;‘ class=‘selftalkNo‘>"+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+"<b id=‘selfOk‘ style=‘background:#fff;color:#ff0028;cursor: pointer;‘ class=‘selftalkOk‘>"+_this.opts.selfOk+"<\/b><\/h2><textarea style=‘width:90%; border:1px solid #ccc; font-size:14px; display:block; margin:10px auto; height:120px‘ id=‘selfTextarea‘ placeholder=‘请填写您的特殊要求‘><\/textarea><\/div>";
 81         this.createMask(html);
 82         var selfBack = document.getElementById("selfBack");
 83         selfBack.style.backgroundColor="#eee";
 84         this.selfEvents();
 85     },
 86 
 87     //事件处理
 88     selfEvents:function(){
 89         this.selfOk();
 90         var selfNo = document.getElementById(‘selfNo‘);
 91         selfNo && this.slefNo();    
 92     },
 93 
 94     //确定按钮事件
 95     selfOk:function(){
 96         var _this = this;
 97         var type = this.opts.types;
 98         var bt=true;
 99         var selfOk = document.getElementById("selfOk");
100         function selfOkFun(e){
101             var e = e || window.event;
102             var el = e.scrElement || e.target;
103             if (el.id == "selfOk" || el.tagName=="IMG") {
104                 if(type == "alert"){
105                     _this.selfRemoveBack();    
106                 }else if(type == "confirm" || type == "talk" || "confirm2"){
107                     if(bt){
108                         _this.opts.callback();
109                     }else{
110                         return false;
111                     }
112                     _this.selfRemoveBack();
113                     bt=false;
114                 }
115                 
116             }
117         }
118 
119         document.removeEventListener(‘click‘,selfOkFun,false);
120         document.addEventListener(‘click‘,selfOkFun,false);
121         
122     },
123     //创建背景遮罩
124     createMask:function(html){
125         var selfBack = document.getElementById("selfBack");
126 
127         if(selfBack){
128             return false;
129         }else{
130             var selfBack=document.createElement(‘div‘);
131             selfBack.id = "selfBack";
132             selfBack.style.position = "fixed",
133             selfBack.style.top = "0",
134             selfBack.style.left = "0",
135             selfBack.style.right = "0",
136             selfBack.style.bottom = "0",
137             document.body.appendChild(selfBack);
138             selfBack.innerHTML = html;
139             this.slefClose();
140         }
141     },
142 
143     //关闭按钮事件
144     slefClose:function(){
145         var _this = this;
146         document.addEventListener(‘click‘,function(e){
147             var e = e || window.event;
148             var el = e.scrElement || e.target;
149             if(el.id == "slefClose"){
150                 if(_this.opts.callback){
151                     _this.opts.callback = function(){};
152                     _this.selfRemoveBack();
153                     return;
154                 }
155                 _this.selfRemoveBack();
156             }
157 
158         });
159     },
160 
161     //拒绝或者否认按钮事件
162     slefNo:function(){
163         var _this = this;
164         document.addEventListener(‘click‘,function(e){
165             var e = e || window.event;
166             var el = e.scrElement || e.target;
167             if(el.id == "selfNo" ||el.tagName == "IMG"){
168                 if(_this.opts.callback){
169                     _this.opts.callback = function(){};
170                     _this.selfRemoveBack();
171                     return;
172                 }
173                 _this.selfRemoveBack();
174             }
175         })
176     },
177     //移除窗口功能
178     selfRemoveBack:function(){
179         try{
180             var selfBack = document.getElementById(‘selfBack‘)
181             document.body.removeChild(selfBack);
182         }catch(e){}
183     },
184     
185     //参数配置功能函数
186     exetends:function(a,b){
187         for( var attr in b){
188             a[attr] = b[attr];
189         }
190     },
191     
192     //参数配置以及重写
193     setting:function(settings){
194         this.exetends(this.opts,settings) 
195     },    
196 }

 1 *{padding: 0; margin: 0;}
 2         html{
 3             height: 100%;
 4         }
 5         body{
 6             font-size: 16px; font-family: "Microsoft Yahei";  height: 100%; 
 7         }
 8         h1,h2,h3{
 9             font-weight: lighter;
10         }
11         a{
12             text-decoration: none;
13         }
14         #selfWinsow{
15             width: 80%; margin: 0 5%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%; 
16         }
17         #slefClose{
18             width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;
19         }
20         #slefClose::after{
21             position: absolute;  width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;
22         }
23         #selfWinsow h2{
24             font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;
25         }
26         #selInfo{
27             font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;
28         }
29         #selfBtBox{
30             padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;
31         }
32         .selfBt{
33             padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;
34         }
35         .selfBtDouble{
36             width: 46%; 
37         }
38         .selfBtSingle{
39             color: #fff; width: 100%; padding: 0.8rem 0;
40         }
41         #selfOk{
42             background: #323434; 
43         }
44         .selftalkNo{
45             float: left;position: relative;
46             top: -5px;
47             padding: 4px 10px;
48             display: inline-block;
49             margin-left: 5px;
50             color: #000
51         }
52         .selftalkOk{
53             float: right;
54             position: relative;
55             top: -5px;
56             display: inline-block;
57             margin-right: 5px;
58             padding: 4px 10px;
59             color: #fff
60         }
61         #selfNo,#linkTo2{
62             background: #eeeeee; color: #555555 
63         }
64         #selfBack{
65             width: 100%; background: rgba(0,0,0,.6);
66         }
67         #selfInput{
68             display: block;
69             width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem
70         }
71         #selfInput:focus{
72             border: 1px solid #087690;
73         }

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript" src="SelfWindow.js"></script>
 8     <script>
 9         window.onload = function(){
10             
11                 document.getElementById(‘mee‘).onclick = function(){
12                 
13                     var win = new SelfWinsow({
14                         types : "confirm",
15                         callback:function(){
16                             var name = $("#me").val();
17                              $.ajax({
18                                url: "phpinfo.php",
19                                data: {name:name},
20                                success: function(data){
21                                    if(data=="1"){
22                                        var rrt = new SelfWinsow("知道了，谢谢哈美女")
23                                    }else{
24                                        var rrt = new SelfWinsow({
25                                            selfInfo:"我们是很得体很很得体的",
26                                            types:"confirm",
27                                            callback:function(){
28                                                $("#mee").val("好吧，我输了，我服了你了");
29                                            }
30                                        })
31                                    }
32                                }
33                              });
34                         }
35                         
36                     });
37     
38                 
39                 }
40 
41 }
42     </script>
43 </head>
44 <body>
45     <input id="me" type="text" name="name" value="">
46     <input id="mee" type="button" value="你大爷的">
47 </body>
48 </html>