1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <style> 6 ...
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='/images/loading.gif' data-original="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 85 <!--<script type="text/javascript" src='/images/loading.gif' data-original="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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:重写js confirm alert 提示框
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。