首页 > 代码库 > 修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <style>    *{padding: 0; margin: 0;}    html{      height: 100%;    }    body{      font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;     }    h1,h2,h3{      font-weight: lighter;    }    a{      text-decoration: none;    }    #selfWinsow{      width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;            }    #slefClose{      width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;    }    #slefClose::after{      position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;    }    #selfWinsow h2{      font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;    }    #selInfo{      font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;    }    #selfBtBox{      padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;    }    .selfBt{      padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;    }    .selfBtDouble{      width: 46%;     }    .selfBtSingle{      color: #fff; width: 100%; padding: 0.8rem 0;    }    #selfOk{      background: #323434;     }    .selftalkNo{      float: left;      position: relative;      top: -5px;      padding: 4px 10px;      display: inline-block;      margin-left: 5px;      color: #000;    }    .selftalkOk{      float: right;      position: relative;      top: -5px;      display: inline-block;      margin-right: 5px;      padding: 4px 10px;      color: #fff;    }    #selfNo,#linkTo2{      background: #eeeeee; color: #555555     }    #selfBack{      width: 100%; background: rgba(0,0,0,.6);    }    #selfInput{      display: block;      width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem    }    #selfInput:focus{      border: 1px solid #087690;    }   </style>  <title></title>  <script src=http://www.mamicode.com/"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--<script type="text/javascript" src=http://www.mamicode.com/"SelfWindow.js"></script>-->  <script>     /**selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,*因为给予移动web,所以没有兼容低版本ie*调用方法:var win = new SelfWinsow({*          types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link*          slefTitle : "香送网温馨提示",//弹窗标题*          selfInfo : "Are you really to remove this tool?",//弹窗信息*          selfOk : "YES",//自定义确定按钮文字*          selfNo : "NO",//自定义否认按钮文字*          callback:fn,//当types为confirm,confirm2或者是talk时的回调函数,confirm为模拟            */ var SelfWinsow = function(settings){this.init(settings)};SelfWinsow.prototype = {  init:function(settings){     this.opts = {      types : "",      slefTitle : "",      selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",      selfOk : "continue operator the deposit",      selfNo : "back loading page"    };         this.setting(settings);    if(typeof settings == "string"){      this.opts.selfInfo == settings;    }    if(settings == "" || settings == undefined || settings == null){      this.selfAlert();      }else if(settings.types == "confirm"){      this.selfConfirm();    }else if(settings.types == "confirm2"){      this.selfConfirm2();    }else if(settings.types == "link"){      this.selfLink();    }else if(settings.types=="talk"){      this.selfMobileTalk();    }else{      this.selfAlert();    }  },  //confirm窗口  selfConfirm:function(){    var _this = this;    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>";    this.createMask(html);    this.selfEvents();  },     //alert窗口  selfAlert:function(){    var _this = this;    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>";    this.createMask(html);    this.selfEvents();  },  selfConfirm2:function(){    var _this = this;    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>";    this.createMask(html);    this.selfEvents();  },  //带链接窗口  selfLink:function(){    var _this = this;    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=http://www.mamicode.com/‘"+_this.opts.linkTo1+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfOk+"<\/a><a id=‘linkTo2‘ href=http://www.mamicode.com/‘"+_this.opts.linkTo2+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfNo+"<\/div><\/div>";    this.createMask(html);    this.selfEvents();  },     selfMobileTalk:function(){    var _this = this;    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>";    this.createMask(html);    var selfBack = document.getElementById("selfBack");    selfBack.style.backgroundColor="#eee";    this.selfEvents();  },   //事件处理  selfEvents:function(){    this.selfOk();    var selfNo = document.getElementById(selfNo);    selfNo && this.slefNo();    },   //确定按钮事件  selfOk:function(){    var _this = this;    var type = this.opts.types;    var bt=true;    var selfOk = document.getElementById("selfOk");    function selfOkFun(e){      var e = e || window.event;      var el = e.scrElement || e.target;      if (el.id == "selfOk" || el.tagName=="IMG") {        if(type == "alert"){          _this.selfRemoveBack();          }else if(type == "confirm" || type == "talk" || "confirm2"){          if(bt){            _this.opts.callback();          }else{            return false;          }          _this.selfRemoveBack();          bt=false;        }               }    }     document.removeEventListener(click,selfOkFun,false);    document.addEventListener(click,selfOkFun,false);       },  //创建背景遮罩  createMask:function(html){    var selfBack = document.getElementById("selfBack");     if(selfBack){      return false;    }else{      var selfBack=document.createElement(div);      selfBack.id = "selfBack";      selfBack.style.position = "fixed",      selfBack.style.top = "0",      selfBack.style.left = "0",      selfBack.style.right = "0",      selfBack.style.bottom = "0",      document.body.appendChild(selfBack);      selfBack.innerHTML = html;      this.slefClose();    }  },   //关闭按钮事件  slefClose:function(){    var _this = this;    document.addEventListener(click,function(e){      var e = e || window.event;      var el = e.scrElement || e.target;      if(el.id == "slefClose"){        if(_this.opts.callback){          _this.opts.callback = function(){};          _this.selfRemoveBack();          return;        }        _this.selfRemoveBack();      }     });  },   //拒绝或者否认按钮事件  slefNo:function(){    var _this = this;    document.addEventListener(click,function(e){      var e = e || window.event;      var el = e.scrElement || e.target;      if(el.id == "selfNo" ||el.tagName == "IMG"){        if(_this.opts.callback){          _this.opts.callback = function(){};          _this.selfRemoveBack();          return;        }        _this.selfRemoveBack();      }    })  },  //移除窗口功能  selfRemoveBack:function(){    try{      var selfBack = document.getElementById(selfBack)      document.body.removeChild(selfBack);    }catch(e){}  },     //参数配置功能函数  exetends:function(a,b){    for( var attr in b){      a[attr] = b[attr];    }  },     //参数配置以及重写  setting:function(settings){    this.exetends(this.opts,settings)   },       }  </script>      <script>  window.onload = function(){     var Ord1 = document.getElementById("rd1");    var Ord2 = document.getElementById("rd2");    var Otext = document.getElementById("text");    var Obtn = document.getElementById("btn");         var browser = navigator.appName;         var getText = function(objText){      /*if(browser == ‘Netscape‘){        if(objText.indexOf("TextArea") > -1){          return objText.value;        }else{          return objText.textContent;        }      }else if(browser == ‘Microsoft Internet Explorer‘){        return objText.innerText;      }*/      return objText.value;    }     var text = getText(Otext);    var len= text.length;    Otext.disabled = true;     /*    Ord2.onclick = function(){      if(Ord2.checked){        //alert("ok");        if(len == 0){          var selfConfirm = new SelfWinsow({                types : "confirm",                callback:function(){}              });                     //alert(selfConfirm);          Otext.disabled = false;          //Otext.onfocus;        }      }         }         Ord1.onclick = function(){           if(Ord1.checked){        Otext.disabled = true;        Otext.valuehttp://www.mamicode.com/= "";        Otext.innerText = "";        Otext.textContent = "";      }    }      */     var aadEvent = function(e, type, target){             e = e || window.e;      if(e.addEventListener){        e.addEventListener(type, function(){          if(e.id == rd2){            target.disabled = false;            var selfConfirm = new SelfWinsow({                slefTitle : "option tips for user",                types : "confirm",                selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",                selfOk : "continue operator the deposit",                selfNo : "back loading page",                callback:function(){}              });           }else if(e.id == rd1){            target.innerIext = ‘‘;            target.value = ‘‘;            target.textContent = "";            target.disabled = true;          }else if(e.id == btn){            var text = getText(target);            var len= text.length;            if(target.disabled==false && len == 0){              var selfConfirm = new SelfWinsow({                slefTitle : "option tips for user",                types : "alert",                selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",                selfOk : "OK",                 callback:function(){}              });                           }          }        }, false);       }else if(e.attachEvent){        e.attachEvent(on+type, function(){          if(e.id == rd2){            target.disabled = false;            var selfConfirm = new SelfWinsow({                types : "confirm",                callback:function(){}              });           }else if(e.id == rd1){            target.innerIext = ‘‘;            target.value = ‘‘;            target.textContent = "";            target.disabled = true;          }          else if(e.id == btn){            var text = getText(target);            var len= text.length;            if(target.disabled==false && len == 0){              var selfConfirm = new SelfWinsow({                slefTitle : "option tips for user",                types : "alert",                selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",                selfOk : "OK",                 callback:function(){}              });                           }          }        }, false);      }     };     aadEvent(Ord2, click, Otext);    aadEvent(Ord1, click, Otext);    aadEvent(Obtn, click, Otext);  }  </script></head><body style="width:80%; margin: 20% auto;">    <form action="" method="get">    <input id="rd1" form="btn" type="radio" value=http://www.mamicode.com/"11111" name="radio" checked=true>first time purchase<br/><br/>         <section style="float:left;">    <input id="rd2" form="btn" type="radio" value=http://www.mamicode.com/"22222" name="radio" >Alternate(s) offer:</section>    <section style="float:left; margin:10px 10px">    <textarea id="text" form="btn" cols="30" rows="7" maxlength="100" style="width:600px;"></textarea>    </section>       </form>  <footer style="clear:both; float:right; margin-right:10%;">    <input id="btn" name="btn" type="submit" value=http://www.mamicode.com/"Next" style="width:60px; height:30px">  </footer></body></html>

链接:

修改js confirm alert 提示框文字的简单实例

自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)

修改js confirm alert 提示框文字的简单实例