首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

修改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 提示框文字的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
详解js类型判断
May 22 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 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
数据备份(2) 热力图(1) expdp(1) 脚本(1) 字符画(1) 外键约束(1) hook(1) dict(1) Vite(1) Foreign Key(1)
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP加密解密类实例代码
2016/07/20 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python入门篇之正则表达式
2014/10/20 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python实现windows下文件备份脚本
2018/05/27 Python
python获取url的返回信息方法
2018/12/17 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
pycharm导入源码的具体步骤
2020/08/04 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
技术员岗位职责范本
2015/04/11 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js