修改js confirm alert 提示框文字

-Advertisement-

...

<!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');
            sel

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

定製的Server-Sent Events 聊天伺服器

...
使用Script元素髮送JSONP請求

...
跨域訪問JSONP CORS

一、JSONP 常用的Jquery框架支持jsonp方式請求，該方式只支持GET方法，傳參大小有限，而且需要後臺根據jsonp的請求方式進行封裝結果返回。其中參數jsonp預設為callback，jsonpCallback為隨機生成的回調函數名,若指定handleRequest，則後臺參數返回時為 ...
jQuery的DOM操作實例（1）——選項卡&&Tab切換

一、原生JavaScript編寫tab切換二、jQuery編寫tab切換在用jQuery編寫選項卡過程中，重要的事搞清楚 .eq() 和 .index() 的使用方法。 .eq()是jQuery遍歷的一種方法，參數是元素的索引 .index() 。要註意index是基於0開始的；如果index為 ...
Win7如何部署apache伺服器(包括SSL設置)

部署普通站點 1、首先下載apache24版本，下載地址為http://pan.baidu.com/s/1pLmvDgB; 2、解壓到你的電腦本地目錄，如D:\Apache24(下文配置都會以當前目錄作為參考說明) 3、修改D:\Apache24\conf\目錄下的httpd.conf文件部署普通 ...
JavaScript數組

JavaScript數組簡介 JavaScript中的數組與其他語言中的數組是不同的，主要體現在：數組中存儲的各項可以是不同類型的數據數組的大小是動態變化的，當新增項時或移除項時可以動態的改變大小來容納當前數據項在JavaScript中創建數組在JavaScript中創建數組有兩種方式：其... ...
webpack學習筆記一（入門）

webpack集成了模塊載入和打包等功能，這兩年在前端圈越來越手歡迎。平時一般是用requirejs、seajs作為模塊載入用，用grunt/gulp作為前端構建。webpack作為模塊化載入相容了amd/cmd模式，並且作為模塊化的資源可以是js/css/image coffeescript/s ...
玩轉JavaScript OOP[3]——徹底理解繼承和原型鏈

概述上一篇我們介紹了通過構造函數和原型可以實現JavaScript中的“類”，由於構造函數和函數的原型都是對象，所以JavaScript的“類”本質上也是對象。這一篇我們將介紹JavaScript中的一個重要概念原型鏈，以及如何經原型鏈實現JavaScript中的繼承。 C#的繼承首先，我們簡單... ...