javascript自定义的对话框

 自定义对话框，demo

 

最新版请查看这里：http://code.google.com/p/cyy0523xc/source/browse/trunk/cyyDialogBox/cyyDialogBox.js

 

 

/** * 显示对话框，包括自定义内容对话框和常见对话框（常见对话框可以设置按钮点击事件处理函数）. * 参考了（特别是样式方面）http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/ * 测试环境：Windows XP + IE7 |　Firefox 3.0.7 | Google 1.0.154.48 * 说明：这个只是一个初步的版本，有些地方尚待完善，甚至可能还有BUG * 小蔡 [email protected] * download http://sites.google.com/site/cyy0523xc/Home/cyyDialogBox.rar?attredirects=0 * version 0.8 */ (function(){ var window = this, doc = document, TIMER = 5, // SPEED = 10, // cyyDBConfig = { //按钮ID BTN_CLOSE: 0, BTN_SUBMIT: 1, BTN_CONCEL: 2, //层ID divId: { layer: 'cyyDB_layer', maskLayer: 'cyyDB_maskLayer', body: 'cyyDB_body', header: 'cyyDB_header', main: 'cyyDB_main', autoTips: 'cyyDB_autoTips' } }, //对话框按钮的代码 btnList = [ "", "", "" ], //默认的对话框标题 dialogTitle = { 'error': "出错啦", 'warning':'警告', 'success':'操作成功', 'confirm':"确认框" }, //对话框的按钮 dialogBtn = {'error': [cyyDBConfig.BTN_CLOSE], 'warning':[cyyDBConfig.BTN_CLOSE], 'success':[cyyDBConfig.BTN_CLOSE], 'confirm':[cyyDBConfig.BTN_SUBMIT,cyyDBConfig.BTN_CONCEL]}, cyyDialogBox = window.cyyDialogBox = { isOnShow: false, div: null, gmlDiv: null, gmlContentDiv: null, gmlTitle: null, gmlContent: null, //显示弹出层（自定义对话框） //title: 对话框的标题（必须） //width: int //height: int //content: 显示内容（可含html代码） //opacity: 背景遮罩层的透明度（int，0-100） //cssHeader: 内容层的头部样式 //cssContent: 内容层的内容部分样式 show: function(title, width, height, content, opacity, cssHeader, cssContent){ if(this.isOnShow){ return false; } this.__init(width, height); if(opacity){ this.__setOpacity(this.gmlDiv, opacity); } this.gmlTitle = doc.createElement('div'); this.gmlTitle.setAttribute('id', cyyDBConfig.divId.header); this.gmlTitle.className = cssHeader ? cssHeader : 'normalheader'; var div = doc.createElement('div'); div.className = 'title'; div.innerHTML = title; this.gmlTitle.appendChild(div); div = doc.createElement('div'); div.className = 'close'; div.onclick = cyyDialogBox.close; div.setAttribute('title', '关闭'); this.gmlTitle.appendChild(div); this.gmlContentDiv.appendChild(this.gmlTitle); this.gmlContent = doc.createElement('div'); this.gmlContent.setAttribute('id', cyyDBConfig.divId.main); this.gmlContent.className = cssContent ? cssContent : 'normal'; this.gmlContent.innerHTML = content; this.gmlContentDiv.appendChild(this.gmlContent); if(height>0){ this.gmlContent.style.height = (height-38)+'px'; } }, dialogBtnFunc:null, //对话框按钮点击事件的Callback函数 autoCloseTipsTimer: null, autoUpdateCloseSecTimer: null, //显示常用对话框， //type: error|warning|confirm|success（必须） //msg: 提示内容（可含html代码）（必须） //callback: 按钮点击事件的回调函数 //title: 对话框的标题 //autoCloseSec: 自动关闭时间设定 //autoCloseTips: 自动关闭提示 showDialog: function(type, msg, callback, title, autoCloseSec, autoCloseTips){ if(this.isOnShow){ return false; } title = title ? title : dialogTitle[type]; msg = "

"+msg+"

"; msg += "

"+this.__getBtn(type)+"

"; this.show(title, 0, 0, msg, 70, type+'header', type); this.gmlDiv.style.backgroundColor = '#fff'; if(autoCloseSec){ this.autoCloseTipsTimer = window.setTimeout("cyyDialogBox.close()", (autoCloseSec * 1000)); if(autoCloseTips){ this.showTips(autoCloseTips); }else{ this.showTips("将在"+autoCloseSec+"秒后自动关闭，请注意..."); } this.autoUpdateCloseSecTimer = window.setTimeout("cyyDialogBox.__updateAutoCloseSec("+(autoCloseSec-1)+");", 1000); } if(callback){ this.dialogBtnFunc = callback; } }, tipsDiv: null, //显示tips信息，如进度信息等 showTips: function(msg){ this.tipsDiv = doc.createElement('div'); //this.tipsDiv.setAttribute('id', 'global_mask_layer_tips'); this.tipsDiv.innerHTML = msg; this.tipsDiv.style.position = 'absolute'; this.tipsDiv.style.backgroundColor='red'; //this.tipsDiv.style.whiteSpace = 'nowrap'; var t = this.gmlContent.offsetTop; this.tipsDiv.style.top = t+'px'; this.gmlContentDiv.appendChild(this.tipsDiv); var w = this.gmlContent.offsetWidth, l = this.gmlContent.offsetLeft, tw = parseInt(this.tipsDiv.offsetWidth); this.tipsDiv.style.left = (w+l-tw-1)+'px'; }, //隐藏tips信息 hideTips: function(){ this.__removeDiv(this.tipsDiv); }, dOpacity: 100, //对话框的透明度 //关闭 close: function(){ //alert('关闭'); try{ window.clearInterval(cyyDialogBox.gmlContentDiv.timer); window.clearTimeout(this.autoCloseTipsTimer); window.clearTimeout(this.autoUpdateCloseSecTimer); }catch(e){} cyyDialogBox.dOpacity = 100; cyyDialogBox.gmlContentDiv.timer = setInterval("cyyDialogBox.__fade(false)", TIMER); }, onDialogBtn: function(id){ cyyDialogBox.close(); if(cyyDialogBox.dialogBtnFunc){ cyyDialogBox.dialogBtnFunc(id); } }, //以下为private __init: function(width, height){ this.isOnShow = true; this.div = doc.createElement("div"); this.div.setAttribute('id', cyyDBConfig.divId.layer); this.gmlDiv = doc.createElement("div"); this.gmlDiv.setAttribute('id', cyyDBConfig.divId.maskLayer); this.div.appendChild(this.gmlDiv); this.gmlContentDiv = doc.createElement("div"); this.gmlContentDiv.setAttribute('id', cyyDBConfig.divId.body); this.__setOpacity(this.gmlContentDiv,0); if(width>0){ this.gmlContentDiv.style.width = width+'px'; this.gmlContentDiv.style.marginLeft = '-'+parseInt(width/2)+'px'; } if(height>0){ this.gmlContentDiv.style.height = height+'px'; this.gmlContentDiv.style.marginTop = '-'+parseInt(height/2)+'px'; } this.div.appendChild(this.gmlContentDiv); doc.body.appendChild(this.div); this.dOpacity = 0; this.gmlContentDiv.timer = setInterval("cyyDialogBox.__fade(true)", TIMER); this.autoCloseTipsTimer = null; this.autoUpdateCloseSecTimer = null; }, //o: object //opacity: 0-100之间的整数 __setOpacity: function(o, opacity){ o.alpha = opacity; o.style.opacity = opacity/100; o.style.filter = 'alpha(opacity=' + opacity + ')'; }, // fade-in the dialog box // __fade: function(flag) { if(flag) { this.dOpacity += SPEED; } else { this.dOpacity -= SPEED; } this.__setOpacity(this.gmlContentDiv, this.dOpacity); if(this.dOpacity >= 99) { clearInterval(this.gmlContentDiv.timer); this.gmlContentDiv.timer = null; } else if(this.dOpacity <= 1) { clearInterval(this.gmlContentDiv.timer); this.__clear(); } }, __getBtn: function(type){ var btn = '',i=0, p='', len=dialogBtn[type].length; for(;i0 && (auto = doc.getElementById(cyyDBConfig.divId.autoTips)) ){ auto.innerHTML = sec; cyyDialogBox.autoUpdateCloseSecTimer = window.setTimeout("cyyDialogBox.__updateAutoCloseSec("+(sec-1)+");", 1000); } }, __removeDiv: function(o){ try{ o.parentNode.removeChild(o); o = null; }catch(e){} //return o; } }; })();  

 

PS:csdn这东西用得越来越不爽，哎。。。。。。