首页
所有分类
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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
js实现点击展开隐藏效果（实例代码）
Sep 28 Javascript
ES6基础之默认参数值
Feb 21 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
请假条(31) 保证书(97) 责任书(145) 主持词(345) 倡议书(159) 承诺书(369) 广告词(105) 决心书(42) 活动总结(790) 建议书(203)
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP新手上路（八）
2006/10/09 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
python实现根据月份和日期得到星座的方法
2015/03/27 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python图像和办公文档处理总结
2019/05/28 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
捷克多品牌在线时尚商店：ANSWEAR.cz
2020/10/03 全球购物
27个经典Linux面试题及答案，你知道几个？
2013/01/10 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
团支部建设方案
2014/05/02 职场文书
给客户的检讨书
2014/12/21 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
励志正能量20句：送给所有为梦想拼搏的人
2019/11/11 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript