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

先貼出主要代碼：

代碼如下:

//對話框地基本html內(nèi)容，絕對定位，高寬設置，背景圖片，標題，兩個按鈕圖

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：確定地執(zhí)行函數(shù)，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://確認對話框，帶確認取消鍵，確認則執(zhí)行函數(shù)，否則不執(zhí)行并消失

$(#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;

}

}

除了上面地使用函數(shù)，還需要對對話框進行初始化，為了插入文檔中并且居中顯示

代碼如下:

function initdialog() {

$(body).before(tdlz_dialog_content);

//計算恰當?shù)刂虚g位置

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

});

更多信息請查看IT技術專欄