• 修改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{
           60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%; 
           
        }
        #slefClose{
           25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;
        }
        #slefClose::after{
          position: absolute;  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{
           46%; 
        }
        .selfBtSingle{
          color: #fff;  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{
           100%; background: rgba(0,0,0,.6);
        }
        #selfInput{
          display: block;
           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://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      <!--<script type="text/javascript" src="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='"+_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>";
        this.createMask(html);
        this.selfEvents();
      },
       
      selfMobileTalk:function(){
        var _this = this;
        var html="<div id='selfWinsow' style='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='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.value = "";
            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="80%; margin: 20% auto;">
      
      <form action="" method="get">
        <input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/>
         
        <section style="float:left;">
        <input id="rd2" form="btn" type="radio" value="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="600px;"></textarea>
        </section>
         
      </form>
      <footer style="clear:both; float:right; margin-right:10%;">
        <input id="btn" name="btn" type="submit" value="Next" style="60px; height:30px">
      </footer>
    </body>
    </html>

    链接:

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

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

  • 相关阅读:
    每日思考(2020/07/13)
    每日思考(2020/07/12)
    每日思考(2020/07/11)
    每日思考(2020/07/10)
    每日思考(2020/07/09)
    每日思考(2020/05/12)
    Apache服务器的下载与安装
    知问前端——验证插件(二)
    知问前端——验证插件(一)
    知问前端——日历UI(三)
  • 原文地址:https://www.cnblogs.com/On1Key/p/5864522.html
Copyright © 2020-2023  润新知