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

先貼出主要代碼：

代碼如下:

//對(duì)話(huà)框地基本html內(nèi)容，絕對(duì)定位，高寬設(shè)置，背景圖片，標(biāo)題，兩個(gè)按鈕圖

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：標(biāo)題，type：對(duì)話(huà)框類(lèi)型，funcok：確定地執(zhí)行函數(shù)，time：倒計(jì)時(shí)或alert顯示地時(shí)間

function showtddialog(text, type, funcok, time) {

var dialogid = #tdlz_dialog;

$(dialogid).show(500);

$(#dialog_lb_text).html(text);

switch (type) {

case show://展示信息地對(duì)話(huà)框，帶一個(gè)確定鍵，點(diǎn)擊后消失

$(#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://警告對(duì)話(huà)框，time時(shí)間后消失

$(#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://確認(rèn)對(duì)話(huà)框，帶確認(rèn)取消鍵，確認(rèn)則執(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://倒計(jì)時(shí)對(duì)話(huà)框，顯示time時(shí)間倒計(jì)時(shí)，結(jié)束后消失

$(#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ù)，還需要對(duì)對(duì)話(huà)框進(jìn)行初始化，為了插入文檔中并且居中顯示

代碼如下:

function initdialog() {

$(body).before(tdlz_dialog_content);

//計(jì)算恰當(dāng)?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();

}

使用地時(shí)候如下（以confirm對(duì)話(huà)框?yàn)槔?/P>

代碼如下:

initdialog();

showtddialog(i'm a dialog,confirm,function(){

console.log(button ok clicked!);

});

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄