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


Posted in Javascript onJune 10, 2016

修改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://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='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.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="width: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="width:600px;"></textarea>
    </section>
    
  </form>
  <footer style="clear:both; float:right; margin-right:10%;">
    <input id="btn" name="btn" type="submit" value="Next" style="width:60px; height:30px">
  </footer>
</body>
</html>

以上这篇修改js confirm alert 提示框文字的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
小程序实现五星点评效果
Nov 03 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 #Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 #Javascript
关于网页中的无缝滚动的js代码
Jun 09 #Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
You might like
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
pygame加载中文名mp3文件出现error
2017/03/31 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Python类成员继承重写的实现
2020/09/16 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
中专毕业生自荐信范文
2013/11/28 职场文书
给物业的表扬信
2014/01/21 职场文书
初中生自我评价
2014/02/01 职场文书
绿色城市实施方案
2014/03/19 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL