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

先貼出主要代碼：
代碼如下:
//對話框的基本html內容，絕對定位，高寬設置，背景圖片，標題，兩個按鈕圖
var tdlz_dialog_content = "+ "' style='position:absolute;text-align:center;width:540px;height:331px;background:url(assets/images/add_fbc.png);'>

"
+ "

";
//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!");

});

效果圖如下:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com