首页
所有分类
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 相关文章推荐
页面调用单个swf文件，嵌套出多个方法。
Nov 21 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
vue router-link传参以及参数的使用实例
Nov 10 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
react中Suspense的使用详解
Sep 01 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
由简入繁实现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
软件工程师面试题(40) 软件测试工程师面试题(53) PYTHON面试题(27) 网络工程师面试题(96) EJB面试题(46) Oracle面试题(81) C#面试题(90) LINUX面试题(83) .NET面试题(131) Javascript面试题(44)
You might like
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Promise扫盲贴
2019/06/24 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
JS实现纵向轮播图（初级版）
2020/01/18 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
英国排名第一的在线宠物用品商店：Monster Pet Supplies
2018/05/20 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
暂住证明怎么写
2015/06/19 职场文书
酒店宣传语大全
2015/07/13 职场文书
2015元旦感言
2015/12/09 职场文书
Hive导入csv文件示例
2022/06/25 数据库