javascript 对话框

时间：2007-10-31 来源：shiwudao

本来参照网上的各种资料，写了一个javascript对话框，准备用于项目，结果现在决定不用了。放在这儿吧，作为纪念。用法： var dialog = new MYDialog(100, 100, 400, 300, "test dialog", "myetst"); dialog.show(); 注意代码中的hidefr 是用来解决IE中层不能挡住下拉框的bug而加上的。代码： var isIE=document.all? true : false; function MYDialog(x, y, w, h, title, name) {

if(document.getElementById(name+'root')) {
this.rootdiv = document.getElementById(name+'root');
return;
}
w=Math.max(w, 80);
w=Math.min(w, 800);
h=Math.max(h, 60);
h=Math.min(h, 600);

var rootdiv = new subElement(x, y, 4+w, 4+h, name+'root', 'div', '');
rootdiv.style.display = 'none';

var hidediv = new subElement(0, 0, 4+w, 4+h, name+'hidediv', 'div', '');
var hidefr = new subElement(0, 0, 4+w, 4+h, name+'hideframe', 'iframe', '');
hidefr.style.visibility= 'inherit';
hidefr.frameBorder = 0;
hidefr.src = 'dummy.html';

var shadow = new subElement(4, 4, w, h, name+'shadow', 'div', 'mydialog_shadow');
if(isIE)shadow.style.filter="alpha(opacity=50)";
else shadow.style.MozOpacity=.5;
shadow.style.backgroundColor = '#000';

var delw = isIE?0:4;
var delh = isIE?0:4;
var framediv = new subElement(0, 0, w-delw, h-delh, name+'framediv', 'div', 'mydialog_frame');
framediv.style.borderWidth = '2px';
framediv.style.borderColor = '#dddddd';
framediv.style.backgroundColor = '#dddddd';
framediv.style.borderStyle = 'outset';

var delx = isIE?0:2;
var dely = isIE?0:2;
delw = isIE?0:2;
delh = isIE?0:2;
var titlebar = new subElement(delx, dely, w-6-delw, 20, name+'titlebar', 'div', 'mydialog_title');
titlebar.style.cursor = 'default';
titlebar.style.backgroundColor = '#036';
titlebar.innerHTML = "<table width='100%'><tr height='20px' valign='middle'><td style='color:#ffffff'>" + title + "</td><td align='right'>" + "<input type='image' src='close.gif' id='" + name + "close'></input>" + "</td></tr></table>";

delx = isIE?0:2;
dely = isIE?0:3;
delw = isIE?0:14;
delh = isIE?0:4;
var content = new subElement(delx, 27-dely, w-4-delw, h-31-delh, name+'content', 'div', 'mydialog_content');
content.style.overflow = 'auto';
content.style.padding = '0px 3px 0px 3px';
content.style.backgroundColor = '#ffffff';
content.style.borderWidth="2px";
content.style.borderColor= '#dddddd';
content.style.borderStyle="inset";


hidediv.appendChild(hidefr);
rootdiv.appendChild(hidediv);
rootdiv.appendChild(shadow);

framediv.appendChild(titlebar);
framediv.appendChild(content);
rootdiv.appendChild(framediv);

document.body.appendChild(rootdiv);

this.rootdiv = rootdiv;
var closebutton = document.getElementById(name+"close");
closebutton.style.cursor = "pointer";
closebutton.onclick = function() {
    var el = document.getElementById(name+"root");
if(el) el.style.display = "none";
};
} MYDialog.prototype.show = function() {
this.rootdiv.style.display = "";
} function hideElement(id) {

}
function subElement(x, y, w, h, id, elname, class_name) {
var el = document.createElement(elname);
el.style.position = 'absolute';
el.style.left = x +'px';
el.style.top = y + 'px';
el.style.width = w + 'px';
el.style.height = h + 'px';
el.className = class_name;
el.setAttribute('id', id);

return el;
}