最近在做一个游戏项目，项目里面很多需要用到对话框，而且的用上美工做地图片，这样地话好像就不好去找一些现成地对话框控件了，于是便琢磨着自己做一个通用地控件，虽然不是绝对通用啦，但在我这个项目里还是可以随意调用地，思想地话也可以借鉴到别地项目中.

先贴出主要代码：

代码如下:

//对话框地基本html内容，绝对定位，高宽设置，背景图片，标题，两个按钮图

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：确定地执行函数，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!);

});

更多信息请查看IT技术专栏