js/jquery寫的一個定製對話框控件

最近在做一個遊戲項目，項目裏面很多需要用到對話框，而且得用上美工做的圖片，這樣的話好像就不好去找一些現成的對話框控件了，於是便琢磨着自己做一個通用的控件，雖然不是絕對通用啦，但在我這個項目裏還是可以隨意調用的，思想的話也可以借鑑到別的項目中。

先貼出主要代碼：

//對話框的基本html內容，絕對定位，高寬設置，背景圖片，標題，兩個按鈕圖
var tdlz_dialog_content = "<div  id='tdlz_dialog"
    + "' style='position:absolute;text-align:center;width:540px;height:331px;background:url(assets/images/add_fbc.png);'><ul><li id='dialog_lb_text' style='margin-top:100px;color:#fff;font-size:25px'>"
    + "</li><li style='margin-top:100px;cursor:pointer'><img id='tdlz_dialog_ok' src='assets/images/queren.png'></img><img id='tdlz_dialog_cancel' src='assets/images/quxiao.png'></img></li></ul></div>";
    //text：標題，type：對話框類型，funcOK：確定的執行函數，time：倒計時或alert顯示的時間
function showTdDialog(text, type, funcOK, time) {
    var dialogid = "#tdlz_dialog";
    $(dialogid).show(500);
    $("#dialog_lb_text").html(text);
    switch (type) {
        case "show"://展示信息的對話框，帶一個確定鍵，點擊後消失
            $("#tdlz_dialog_cancel").hide();
            $("#tdlz_dialog_ok").unbind();
            $("#tdlz_dialog_ok").click(function () {
                $(dialogid).hide(500);
                $("#tdlz_dialog_ok").css("margin-right", "0");
                $("#tdlz_dialog_cancel").css("margin-left", "0");
            });
            break;
        case "alert"://警告對話框，time時間後消失
            $("#tdlz_dialog_cancel").hide();
            $("#tdlz_dialog_ok").unbind();
            setTimeout(function () {
                $(dialogid).hide(500);
                $("#tdlz_dialog_ok").css("margin-right", "0");
                $("#tdlz_dialog_cancel").css("margin-left", "0");
            }, time);
            $("#tdlz_dialog_ok").click(function () {
                $(dialogid).hide(500);
                $("#tdlz_dialog_ok").css("margin-right", "0");
                $("#tdlz_dialog_cancel").css("margin-left", "0");
            });
            break;
        case "confirm"://確認對話框，帶確認取消鍵，確認則執行函數，否則不執行並消失
            $("#tdlz_dialog_cancel").show();
            $("#tdlz_dialog_ok").css("margin-right", "5%");
            $("#tdlz_dialog_cancel").css("margin-left", "5%");
            $("#tdlz_dialog_ok").unbind();
            $("#tdlz_dialog_ok").click(function () {
                funcOK();
                setTimeout(function () {
                    $(dialogid).hide(500)
                }, 1000);
                ;
            });
            $("#tdlz_dialog_cancel").click(function () {
                $(dialogid).hide(500);
            });
            break;
        case "time"://倒計時對話框，顯示time時間倒計時，結束後消失
            $("#tdlz_dialog_cancel").hide();
            $("#dialog_lb_text").html(text + "" + time);
            var a = setInterval(function () {
                time = parseInt(time) - 1;
                if (time < 0) {
                    clearInterval(a);
                    $(dialogid).hide(500);
                }
                $("#dialog_lb_text").html(text + "" + time);
            }, 1000);
            $("#tdlz_dialog_ok").unbind();
            $("#tdlz_dialog_ok").click(function () {
                $(dialogid).hide(500);
                $("#tdlz_dialog_ok").css("margin-right", "0");
                $("#tdlz_dialog_cancel").css("margin-left", "0");
            });
            break;
    }
}

除了上面的使用函數，還需要對對話框進行初始化，爲了插入文檔中並且居中顯示

function initDialog() {
    $("body").before(tdlz_dialog_content);
    //計算恰當的中間位置
    var top_percent = (window.innerHeight / 4) / window.innerHeight
    var left_percent = (window.innerWidth / 2 - $("#tdlz_dialog").width() / 2) / window.innerWidth;
    $("#tdlz_dialog").css("top", top_percent * 100 + "%");
    $("#tdlz_dialog").css("left", left_percent * 100 + "%");
    $("#tdlz_dialog").css("z-index", "100");
    $("#tdlz_dialog").hide();
}

使用的時候如下（以confirm對話框爲例）：

initDialog();
showTdDialog("I'm a Dialog","confirm",function(){

	console.log("Button OK Clicked!");

});

效果圖如下: