你的位置:首页 > 网页设计

[网页设计]重写js confirm alert 提示框


 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <style> 6     *{padding: 0; margin: 0;} 7     html{ 8       height: 100%; 9     } 10     body{ 11       font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;  12     } 13     h1,h2,h3{ 14       font-weight: lighter; 15     } 16     a{ 17       text-decoration: none; 18     } 19     #selfWinsow{ 20       width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;  21        22     } 23     #slefClose{ 24       width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer; 25     } 26     #slefClose::after{ 27       position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px; 28     } 29     #selfWinsow h2{ 30       font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0; 31     } 32     #selInfo{ 33       font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem; 34     } 35     #selfBtBox{ 36       padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden; 37     } 38     .selfBt{ 39       padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer; 40     } 41     .selfBtDouble{ 42       width: 46%;  43     } 44     .selfBtSingle{ 45       color: #fff; width: 100%; padding: 0.8rem 0; 46     } 47     #selfOk{ 48       background: #323434;  49     } 50     .selftalkNo{ 51       float: left; 52       position: relative; 53       top: -5px; 54       padding: 4px 10px; 55       display: inline-block; 56       margin-left: 5px; 57       color: #000; 58     } 59     .selftalkOk{ 60       float: right; 61       position: relative; 62       top: -5px; 63       display: inline-block; 64       margin-right: 5px; 65       padding: 4px 10px; 66       color: #fff; 67     } 68     #selfNo,#linkTo2{ 69       background: #eeeeee; color: #555555  70     } 71     #selfBack{ 72       width: 100%; background: rgba(0,0,0,.6); 73     } 74     #selfInput{ 75       display: block; 76       width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem 77     } 78     #selfInput:focus{ 79       border: 1px solid #087690; 80     } 81  82   </style> 83   <title></title> 84   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 85   <!--<script type="text/javascript" src="SelfWindow.js"></script>--> 86   <script> 87  88     /* 89 *selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果, 90 *因为给予移动web,所以没有兼容低版本ie 91 *调用方法:var win = new SelfWinsow({ 92 *          types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link 93 *          slefTitle : "香送网温馨提示",//弹窗标题 94 *          selfInfo : "Are you really to remove this tool?",//弹窗信息 95 *          selfOk : "YES",//自定义确定按钮文字 96 *          selfNo : "NO",//自定义否认按钮文字 97 *          callback:fn,//当types为confirm,confirm2或者是talk时的回调函数,confirm为模拟             98 */ 99 100 var SelfWinsow = function(settings){this.init(settings)};101 SelfWinsow.prototype = {102   init:function(settings){ 103     this.opts = {104       types : "",105       slefTitle : "",106       selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",107       selfOk : "continue operator the deposit",108       selfNo : "back loading page"109     };110     111     this.setting(settings);112     if(typeof settings == "string"){113       this.opts.selfInfo == settings;114     }115     if(settings == "" || settings == undefined || settings == null){116       this.selfAlert();  117     }else if(settings.types == "confirm"){118       this.selfConfirm();119     }else if(settings.types == "confirm2"){120       this.selfConfirm2();121     }else if(settings.types == "link"){122       this.selfLink();123     }else if(settings.types=="talk"){124       this.selfMobileTalk();125     }else{126       this.selfAlert();127     }128   },129   //confirm窗口130   selfConfirm:function(){131     var _this = this;132     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>";133     this.createMask(html);134     this.selfEvents();135   },136   137   //alert窗口138   selfAlert:function(){139     var _this = this;140     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>";141     this.createMask(html);142     this.selfEvents();143   },144   selfConfirm2:function(){145     var _this = this;146     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>";147     this.createMask(html);148     this.selfEvents();149   },150   //带链接窗口151   selfLink:function(){152     var _this = this;153     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>";154     this.createMask(html);155     this.selfEvents();156   },157   158   selfMobileTalk:function(){159     var _this = this;160     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>";161     this.createMask(html);162     var selfBack = document.getElementById("selfBack");163     selfBack.style.backgroundColor="#eee";164     this.selfEvents();165   },166 167   //事件处理168   selfEvents:function(){169     this.selfOk();170     var selfNo = document.getElementById('selfNo');171     selfNo && this.slefNo();  172   },173 174   //确定按钮事件175   selfOk:function(){176     var _this = this;177     var type = this.opts.types;178     var bt=true;179     var selfOk = document.getElementById("selfOk");180     function selfOkFun(e){181       var e = e || window.event;182       var el = e.scrElement || e.target;183       if (el.id == "selfOk" || el.tagName=="IMG") {184         if(type == "alert"){185           _this.selfRemoveBack();  186         }else if(type == "confirm" || type == "talk" || "confirm2"){187           if(bt){188             _this.opts.callback();189           }else{190             return false;191           }192           _this.selfRemoveBack();193           bt=false;194         }195         196       }197     }198 199     document.removeEventListener('click',selfOkFun,false);200     document.addEventListener('click',selfOkFun,false);201     202   },203   //创建背景遮罩204   createMask:function(html){205     var selfBack = document.getElementById("selfBack");206 207     if(selfBack){208       return false;209     }else{210       var selfBack=document.createElement('div');211       selfBack.id = "selfBack";212       selfBack.style.position = "fixed",213       selfBack.style.top = "0",214       selfBack.style.left = "0",215       selfBack.style.right = "0",216       selfBack.style.bottom = "0",217       document.body.appendChild(selfBack);218       selfBack.innerHTML = html;219       this.slefClose();220     }221   },222 223   //关闭按钮事件224   slefClose:function(){225     var _this = this;226     document.addEventListener('click',function(e){227       var e = e || window.event;228       var el = e.scrElement || e.target;229       if(el.id == "slefClose"){230         if(_this.opts.callback){231           _this.opts.callback = function(){};232           _this.selfRemoveBack();233           return;234         }235         _this.selfRemoveBack();236       }237 238     });239   },240 241   //拒绝或者否认按钮事件242   slefNo:function(){243     var _this = this;244     document.addEventListener('click',function(e){245       var e = e || window.event;246       var el = e.scrElement || e.target;247       if(el.id == "selfNo" ||el.tagName == "IMG"){248         if(_this.opts.callback){249           _this.opts.callback = function(){};250           _this.selfRemoveBack();251           return;252         }253         _this.selfRemoveBack();254       }255     })256   },257   //移除窗口功能258   selfRemoveBack:function(){259     try{260       var selfBack = document.getElementById('selfBack')261       document.body.removeChild(selfBack);262     }catch(e){}263   },264   265   //参数配置功能函数266   exetends:function(a,b){267     for( var attr in b){268       a[attr] = b[attr];269     }270   },271   272   //参数配置以及重写273   setting:function(settings){274     this.exetends(this.opts,settings) 275   }, 276   277   278 }279   </script>280 281   282   <script>283   window.onload = function(){284 285     var Ord1 = document.getElementById("rd1");286     var Ord2 = document.getElementById("rd2");287     var Otext = document.getElementById("text");288     var Obtn = document.getElementById("btn");289 290     var text = Otext.innerText;291     var len= text.length;292     Otext.disabled = true;293 294     /*295     Ord2.onclick = function(){296       if(Ord2.checked){297         //alert("ok");298         if(len == 0){299           var selfConfirm = new SelfWinsow({300                 types : "confirm",301                 callback:function(){}302               });303           304           //alert(selfConfirm);305           Otext.disabled = false;306           //Otext.onfocus;307         }308       }309     310     }311     312     Ord1.onclick = function(){313     314       if(Ord1.checked){315         Otext.disabled = true;316         Otext.value = "";317         Otext.innerText = "";318         Otext.textContent = "";319       }320     }321       */322 323     var aadEvent = function(e, type, target){324       325       e = e || window.e;326       if(e.addEventListener){327         e.addEventListener(type, function(){328           if(e.id == 'rd2'){329             Otext.disabled = false;330             var selfConfirm = new SelfWinsow({331                 slefTitle : "option tips for user",332                 types : "confirm",333                 selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",334                 selfOk : "continue operator the deposit",335                 selfNo : "back loading page",336                 callback:function(){}337               });338 339           }else if(e.id == 'rd1'){340             target.innerIext = '';341             target.value = '';342             target.textContent = "";343             target.disabled = true;344           }else if(e.id == 'btn'){345             var text = target.innerText;346             var len= text.length;347             if(target.disabled==false && len == 0){348               var selfConfirm = new SelfWinsow({349                 slefTitle : "option tips for user",350                 types : "alert",351                 selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",352                 selfOk : "OK",353 354                 callback:function(){}355               });356               357             }358           }359         }, false);360 361       }else if(e.addEventListener){362         e.attachEvent('on'+'type', function(){363           if(Ord2.checked){364             Otext.disabled = false;365             var selfConfirm = new SelfWinsow({366                 types : "confirm",367                 callback:function(){}368               });369 370           }else if(Ord1.checked){371             target.innerIext = '';372             target.value = '';373             target.textContent = "";374             target.disabled = true;375           }376         }, false);377       }378 379     };380 381     aadEvent(Ord2, 'click', Otext);382     aadEvent(Ord1, 'click', Otext);383     aadEvent(Obtn, 'click', Otext);384 385 386 }387   </script>388 </head>389 <body style="width:80%; margin: 20% auto;">390 391   <form action="" method="get">392     <input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/>393     394     <section style="float:left;">395     <input id="rd2" form="btn" type="radio" value="22222" name="radio" >Alternate(s) offer:</section>396     <section style="float:left; margin:10px 10px">397     <textarea id="text" form="btn" cols="30" rows="7" maxlength="100" style="width:600px;"></textarea>398     </section>399     400   </form>401   <footer style="clear:both; float:right; margin-right:10%;">402     <input id="btn" name="btn" type="submit" value="Next" style="width:60px; height:30px">403   </footer>404 </body>405 </html>