相似於alert提示框的優化插件

　　最近開發過程當中須要用到一個可以複製文本內容的提示框，其實alert()方法的內容是能夠複製的：把鼠標點擊在alert框上並按下Ctrl+C就複製成功了，只是效果十分不明顯，因此找了一款不錯的插件，其可以美觀地表達info,success,error,confirm,warning,input(prompt),custom(自定義)等提示框。詳細地址能夠參考http://www.jq22.com/jquery-info2351，在此記錄一下方便本身之後使用。

　　首先把壓縮包下載下來，爲了方便表示我把全部的文件都放在一個文件夾並命名爲xcConfirm如圖所示：

其中icons.png爲圖標圖片，在使用不一樣類型的方法時會調用不一樣的icon，並且在xcConfirm.css裏會引用到該文件，因此要選對其正確的項目路徑的icon圖以下：

xcComfirm.css文件主要包含了提示框所用到的的外觀樣式,除了引用圖片的路徑爲基本上不須要改動，能夠直接引用:

/*垂直居中*/ .verticalAlign { vertical-align:middle; display:inline-block; height:100%; margin-left:-1px;
} .xcConfirm .xc_layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;
} .xcConfirm .popBox { position: fixed; left: 50%; top: 50%; background-color:#ffffff; z-index: 2147000001; width: 570px; height: 300px; margin-left: -285px; margin-top: -150px; border-radius: 5px; font-weight: bold; color: #535e66;
} .xcConfirm .popBox .ttBox { height: 30px; line-height: 30px; padding: 14px 30px; border-bottom: solid 1px #eef0f1;
} .xcConfirm .popBox .ttBox .tt { font-size: 18px; display: block; float: left; height: 30px; position: relative;
} .xcConfirm .popBox .ttBox .clsBtn { display: block; cursor: pointer; width: 12px; height: 12px; position: absolute; top: 22px; right: 30px; 
    /*根據圖片位置改變引用路徑*/ background: url(./icons.png) -48px -96px no-repeat;
} .xcConfirm .popBox .txtBox { margin: 40px 100px; height: 100px; overflow: hidden;
} .xcConfirm .popBox .txtBox .bigIcon { float: left; margin-right: 20px; width: 48px; height: 48px;
    /*根據圖片位置改變引用路徑*/ background-image: url(./icons.png); background-repeat: no-repeat; background-position: 48px 0;
} .xcConfirm .popBox .txtBox p { height: 84px; margin-top: 16px; line-height: 26px; overflow-x: hidden; overflow-y: auto;
} .xcConfirm .popBox .txtBox p input { width: 364px; height: 30px; border: solid 1px #eef0f1; font-size: 18px; margin-top: 6px;
} .xcConfirm .popBox .btnArea { border-top: solid 1px #eef0f1;
} .xcConfirm .popBox .btnGroup { float: right;
} .xcConfirm .popBox .btnGroup .sgBtn { margin-top: 14px; margin-right: 10px;
} .xcConfirm .popBox .sgBtn { display: block; cursor: pointer; float: left; width: 95px; height: 35px; line-height: 35px; text-align: center; color: #FFFFFF; border-radius: 5px;
} .xcConfirm .popBox .sgBtn.ok { background-color: #0095d9; color: #FFFFFF;
} .xcConfirm .popBox .sgBtn.cancel { background-color: #546a79; color: #FFFFFF;
}

xcConfirm.js則包含了封裝好的方法，引用便可：

(function($){ window.wxc = window.wxc || {}; /* * 使用說明: * popHtml:html字符串 * type:window.wxc.xcConfirm.typeEnum集合中的元素 * options:擴展對象 * 用法: * 1. window.wxc.xcConfirm("我是彈窗<span>lalala</span>"); * 2. window.wxc.xcConfirm("成功","success"); * 3. window.wxc.xcConfirm("請輸入","input",{onOk:function(){}}) * 4. window.wxc.xcConfirm("自定義",{title:"自定義"}) */ window.wxc.xcConfirm = function(popHtml, type, options) { var btnType = window.wxc.xcConfirm.btnEnum; var eventType = window.wxc.xcConfirm.eventEnum; var popType = { info: { title: "信息", icon: "0 0",//藍色i
 btn: btnType.ok }, success: { title: "成功", icon: "0 -48px",//綠色對勾
 btn: btnType.ok }, error: { title: "錯誤", icon: "-48px -48px",//紅色叉
 btn: btnType.ok }, confirm: { title: "提示", icon: "-48px 0",//黃色問號
 btn: btnType.okcancel }, warning: { title: "警告", icon: "0 -96px",//黃色歎號
 btn: btnType.okcancel }, input: { title: "輸入", icon: "", btn: btnType.ok }, custom: { title: "", icon: "", btn: btnType.ok } }; var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化輸入的參數:彈窗類型
        var config = $.extend(true, { //屬性
            title: "", //自定義的標題
            icon: "", //圖標
            btn: btnType.ok, //按鈕,默認單按鈕
            //事件
            onOk: $.noop,//點擊肯定的按鈕回調
            onCancel: $.noop,//點擊取消的按鈕回調
            onClose: $.noop//彈窗關閉的回調,返回觸發事件
 }, itype, options); var $txt = $("<p>").html(popHtml);//彈窗文本dom
        var $tt = $("<span>").addClass("tt").text(config.title);//標題
        var icon = config.icon; var $icon = icon ? $("<div>").addClass("bigIcon").css("backgroundPosition",icon) : ""; var btn = config.btn;//按鈕組生成參數
        
        var popId = creatPopId();//彈窗索引
        
        var $box = $("<div>").addClass("xcConfirm");//彈窗插件容器
        var $layer = $("<div>").addClass("xc_layer");//遮罩層
        var $popBox = $("<div>").addClass("popBox");//彈窗盒子
        var $ttBox = $("<div>").addClass("ttBox");//彈窗頂部區域
        var $txtBox = $("<div>").addClass("txtBox");//彈窗內容主體區
        var $btnArea = $("<div>").addClass("btnArea");//按鈕區域
        
        var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("肯定");//肯定按鈕
        var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("取消");//取消按鈕
        var $input = $("<input>").addClass("inputBox");//輸入框
        var $clsBtn = $("<a>").addClass("clsBtn");//關閉按鈕
        
        //創建按鈕映射關係
        var btns = { ok: $ok, cancel: $cancel }; init(); function init(){ //處理特殊類型input
            if(popType["input"] === itype){ $txt.append($input); } creatDom(); bind(); } function creatDom(){ $popBox.append( $ttBox.append( $clsBtn ).append( $tt ) ).append( $txtBox.append($icon).append($txt) ).append( $btnArea.append(creatBtnGroup(btn)) ); $box.attr("id", popId).append($layer).append($popBox); $("body").append($box); } function bind(){ //點擊確認按鈕
 $ok.click(doOk); //回車鍵觸發確認按鈕事件
            $(window).bind("keydown", function(e){ if(e.keyCode == 13) { if($("#" + popId).length == 1){ doOk(); } } }); //點擊取消按鈕
 $cancel.click(doCancel); //點擊關閉按鈕
 $clsBtn.click(doClose); } //確認按鈕事件
        function doOk(){ var $o = $(this); var v = $.trim($input.val()); if ($input.is(":visible")) config.onOk(v); else config.onOk(); $("#" + popId).remove(); config.onClose(eventType.ok); } //取消按鈕事件
        function doCancel(){ var $o = $(this); config.onCancel(); $("#" + popId).remove(); config.onClose(eventType.cancel); } //關閉按鈕事件
        function doClose(){ $("#" + popId).remove(); config.onClose(eventType.close); $(window).unbind("keydown"); } //生成按鈕組
        function creatBtnGroup(tp){ var $bgp = $("<div>").addClass("btnGroup"); $.each(btns, function(i, n){ if( btnType[i] == (tp & btnType[i]) ){ $bgp.append(n); } }); return $bgp; } //重生popId,防止id重複
        function creatPopId(){ var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//彈窗索引
            if($("#" + i).length > 0){ return creatPopId(); }else{ return i; } } }; //按鈕類型
    window.wxc.xcConfirm.btnEnum = { ok: parseInt("0001",2), //肯定按鈕
        cancel: parseInt("0010",2), //取消按鈕
        okcancel: parseInt("0011",2) //肯定&&取消
 }; //觸發事件類型
    window.wxc.xcConfirm.eventEnum = { ok: 1, cancel: 2, close: 3 }; //彈窗類型
    window.wxc.xcConfirm.typeEnum = { info: "info", success: "success", error:"error", confirm: "confirm", warning: "warning", input: "input", custom: "custom" }; })(jQuery);

最後在咱們的index.html測試頁面引入上述的css文件，js文件以及jquery文件便可：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <!--引入xcConfirm.css-->
        <link rel="stylesheet" type="text/css" href="./xcConfirm.css"/>
        <!--引入JQuery-->
        <script src="./jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--引入xcConfirm.js-->
        <script src="./xcConfirm.js" type="text/javascript" charset="utf-8"></script>
        <!--頁面8個按鈕的樣式-->
        <style type="text/css"> .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
        </style>
        <!--8個按鈕綁定點擊事件-->
        <script type="text/javascript"> $(function() { $("#btn1").click(function() { var txt=  "個人提示信息的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info); }); $("#btn2").click(function() { var txt=  "我是提示確認的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm); }); $("#btn3").click(function() { var txt=  "我是提示警告的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning); }); $("#btn4").click(function() { var txt=  "我是提示錯誤的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error); }); $("#btn5").click(function() { var txt=  "我是提示成功的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success); }); $("#btn6").click(function() { var txt=  "我是提示輸入的文字"; window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input, { //點擊確認的事件
 onOk:function(v) { console.log(v); } }); }); $("#btn7").click(function() { var txt=  "自定義呀"; var option = { title: "自定義", btn: parseInt("0011",2), onOk: function() { console.log("確認啦"); } } window.wxc.xcConfirm(txt, "custom", option); }); $("#btn8").click(function() { var txt=  "默認文字"; window.wxc.xcConfirm(txt); }); }); </script>
    </head>
    <body>
        <!--8個按鈕-->
        <div class="" style="height: 768px;">
            <div class="sgBtn" id="btn1">彈窗1(信息)</div>
            <div class="sgBtn" id="btn2">彈窗2(提示)</div>
            <div class="sgBtn" id="btn3">彈窗3(警告)</div>
            <div class="sgBtn" id="btn4">彈窗4(錯誤)</div>
            <div class="sgBtn" id="btn5">彈窗5(成功)</div>
            <div class="sgBtn" id="btn6">彈窗6(輸入框)</div>
            <div class="sgBtn" id="btn7">彈窗7(自定義)</div>
            <div class="sgBtn" id="btn8">彈窗8(默認)</div>
        </div>
    </body>
</html>

最後打開index.html長成這樣：

隨便點擊一個按鈕：

OK，其實最核心的就是方法就是使用window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info)來代替alert()或者confirm()或者prompt(),其次重寫了onOk():function(v){}方法，並且能夠在css裏改變整個框的位置以及樣式，終於不用alert()，confirm(),prompt(),Nice!