欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

修改js confirm alert 提示框文字

程序员文章站 2022-04-30 22:18:22
...
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>

        /*
*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="

"+_this.opts.slefTitle+"
"+_this.opts.selfInfo+"

"+_this.opts.selfOk+"

"+_this.opts.selfNo+"";
        this.createMask(html);
        this.selfEvents();
    },
    
    //alert窗口
    selfAlert:function(){
        var _this = this;
        var html="

"+_this.opts.slefTitle+"
"+_this.opts.selfInfo+"

"+_this.opts.selfOk+"";
        this.createMask(html);
        this.selfEvents();
    },
    selfConfirm2:function(){
        var _this = this;
        var html="



"+_this.opts.slefTitle+"
"+_this.opts.selfInfo+"

"+_this.opts.selfOk+"";
        this.createMask(html);
        this.selfEvents();
    },
    //带链接窗口
    selfLink:function(){
        var _this = this;
        var html="



"+_this.opts.slefTitle+"
"+_this.opts.selfInfo+""+_this.opts.selfOk+""+_this.opts.selfNo+"";
        this.createMask(html);
        this.selfEvents();
    },
    
    selfMobileTalk:function(){
        var _this = this;
        var html="



"+_this.opts.selfNo+""+_this.opts.slefTitle+""+_this.opts.selfOk+"";
        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 = "selfBac修改js confirm alert 提示框文字



声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。




相关文章


相关视频












网友评论


文明上网理性发言，请遵守 新闻评论服务协议
我要评论






  • 修改js confirm alert 提示框文字
    • 

    • 

    

    


    

    

    

    

    专题推荐
    


    

    

    

    

    作者信息
    

    

    修改js confirm alert 提示框文字
    

    

    

    认证0级讲师
    

    

    

    

    发布技术文章
    

    

      

    • 最新文章
      • 

    • 热门排行
      • 

    

    

    

    

    

    

    

    
推荐视频教程
    

  • 
修改js confirm alert 提示框文字javascript初级视频教程

    • 

  • 
修改js confirm alert 提示框文字jquery 基础视频教程

    • 

    

    

    
视频教程分类
    


    

    

    

    

    

    


    ：公益在线php培训，帮助PHP学习者快速成长！
    

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1修改js confirm alert 提示框文字关于我们免责申明赞助与捐赠广告合作
    

    

    
修改js confirm alert 提示框文字  
            修改js confirm alert 提示框文字
    相关标签： 修改js confirm alert 提示框文字

    上一篇： 如何用php获取文件名后缀_php技巧

    下一篇： php控制客户端缓存

    推荐阅读