修改js confirm alert 提示框文字_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

修改js confirm alert 提示框文字_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:15 AM

<!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: "&times;"; 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>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.