自己使用js/jquery寫的一個自訂對話框控制_javascript技巧

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

先貼出主要程式碼：

複製程式碼 程式碼如下:

//對話框的基本html內容，絕對定位，高寬設置，背景圖片，標題，兩個按鈕圖
var tdlz_dialog_content = "

• "
  "
• 

";
/ /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 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_td_dia. ;
//計算適當的中間位置
var top_percent = (window.innerHeight / 4) / window.innerHeight
var left_percent = (window.innerWidth / 2 - $("tdwid () / 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!"); });
效果圖如下: