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

先貼出主要代碼：

復制代碼 代碼如下:

//對話框的基本html內容，絕對定位，高寬設置，背景圖片，標題，兩個按鈕圖
var tdlz_dialog_content = "<div><ul><li>"
+ "</li><li><img src='assets/images/queren.png'></img><img 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();
}

復制代碼 代碼如下:

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

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

});