最近在做一个游戏项目,项目里面很多需要用到对话框,而且得用上美工做的图片,这样的话好像就不好去找一些现成的对话框控件了,于是便琢磨着自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中。先贴出主要代码:复制代码代码如下: //对话框的基本超文本标记语言内容,绝对定位,高宽设置,背景图片,标题,两个按钮图var tdlz _ dialog _ content=' div id=' tdlz _ dialog ' ' ' style=' position : absolute;文本对齐:居中;宽度宽度:540像素宽度:331像素背景:url(资产/图像/add _ FBC。巴布亚新几内亚);ulli id=' dialog _ lb _ text ' style=' margin-top :100 px;color : # ffffont-size :25 px ' '/Lili style=' margin-top :100 px;光标:指针' img id=' tdlz _ dialog _ ok ' src=' assets/images/queren。png '/imgimg id=' tdlz _ dialog _ cancel ' src=' assets/images/萧曲。png '/img/Li/ul/div ';//文本:标题,类型:对话框类型,funcOK:确定的执行函数,时间:倒计时或警报显示的时间函数showTdDialog(文本、类型、funcOK、时间){ var dialog id=' # tdlz _ dialog $(dialog id).演出(500场);$('#dialog_lb_text ').html(文本);开关(类型){ case 'show'://展示信息的对话框,带一个确定键,点击后消失$('#tdlz_dialog_cancel ').hide();$('#tdlz_dialog_ok ').unbind();$('#tdlz_dialog_ok ').单击(function () { $(dialogid)).隐藏(500);$('#tdlz_dialog_ok ').css(“”右边距',' 0 ');$('#tdlz_dialog_cancel ').css(“”左边距',' 0 ');});打破;案例"警报"://警告对话框,时间时间后消失$('#tdlz_dialog_cancel ').hide();$('#tdlz_dialog_ok ').unbind();setTimeout(函数(){ $(dialogid)).隐藏(500);$('#tdlz_dialog_ok ').css(“”右边距',' 0 ');$('#tdlz_dialog_cancel ').css(“”左边距',' 0 ');},时间);$('#tdlz_dialog_ok ').单击(function () { $(dialogid)).隐藏(500);$('#tdlz_dialog_ok ').css(“”右边距',' 0 ');$('#tdlz_dialog_cancel ').css(“”左边距',' 0 ');});打破;案例"确认"://确认对话框,带确认取消键,确认则执行函数,否则不执行并消失$('#tdlz_dialog_cancel ').show();$('#tdlz_dialog_ok ').css(“”右边距',' 5% ');$('#tdlz_dialog_cancel ').css(“”左边距',' 5% ');$('#tdlz_dialog_ok ').unbind();$('#tdlz_dialog_ok ').单击(function(){ Funcok();setTimeout(函数(){ $(dialogid)).hide(500) },1000);});$('#tdlz_dialog_cancel ').单击(function () { $(dialogid)).隐藏(500);});打破;案例'时间' ://倒计时对话框,显示时间时间倒计时,结束后消失$('#tdlz_dialog_cancel ').hide();$('#dialog_lb_text ').html(文本''时间);var a=setInterval(function(){ time=parseInt(time)-1;如果(时间0){ clearInterval(a);$(拨号).隐藏(500);} $('#dialog_lb_text ').html(文本''时间);}, 1000);$('#tdlz_dialog_ok ').unbind();$('#tdlz_dialog_ok ').单击(function () { $(dialogid)).隐藏(500);$('#tdlz_dialog_ok ').css(“”右边距',' 0 ');$('#tdlz_dialog_cancel ').css(“”左边距',' 0 ');});打破;} } 除了上面的使用函数,还需要对对话框进行初始化,为了插入文档中并且居中显示复制代码代码如下:函数initDialog(){ $(“body”).之前(tdlz _ dialog _ content);//计算恰当的中间位置var top _ percent=(窗口。内部高度/4)/窗户。内部高度var left _ percent=(窗口。内部宽度/2-$(' # tdlz _ dialog ').width()/2)/window。内部宽度;$('#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('我是对话框','确认,函数(){ console.log('按钮确定点击!');});效果图如下: