半透明的div对话框

源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function MessageBox(){}

MessageBox.alert = MessageBox$alert;

MessageBox.confirm = MessageBox$confirm;

MessageBox.create = MessageBox$create;

MessageBox.setSize = MessageBox$setSize;

MessageBox.close = MessageBox$close;

MessageBox.divConfig= {'id':'div1','bgColor':'green','zIndex':1000};

MessageBox.tableConfig=

{

'id':'table1',

'bgColor':'white',

'width':'250px',

'height':'100px',

'borderColor':'lightblue',

'titlebgColor':'aliceblue'

};

function MessageBox$alert( message ,callBack )

{

MessageBox.create( message );

var btn = document.createElement('input');

btn.type = 'button';

btn.value = '确定';

if( callBack != null )

{

btn.attachEvent('onclick',function(){MessageBox.close();callBack();});

}

else

{

btn.attachEvent('onclick',function(){MessageBox.close();});

}

var table = document.getElementById(MessageBox.tableConfig['id']);

table.rows[2].cells[0].innerHTML = '';

table.rows[2].cells[0].appendChild(btn);

}

function MessageBox$confirm( message,callBack )

{

MessageBox.create( message );

var btnOK = document.createElement('input');

btnOK.type = 'button';

btnOK.value = '确定';

btnOK.style.marginRight = '10px';

if( callBack != null )

{

btnOK.attachEvent('onclick',function(){MessageBox.close();callBack( true );});

}

else

{

btnOK.attachEvent('onclick',function(){MessageBox.close();});

}

var btnCANCEL = document.createElement('input');

btnCANCEL.type = 'button';

btnCANCEL.value = '取消';

if( callBack != null )

{

btnCANCEL.attachEvent('onclick',function(){MessageBox.close();callBack( false );});

}

else

{

btnCANCEL.attachEvent('onclick',function(){MessageBox.close();});

}

var table = document.getElementById(MessageBox.tableConfig['id']);

table.rows[2].cells[0].innerHTML = '';

table.rows[2].cells[0].appendChild(btnOK);

table.rows[2].cells[0].appendChild(btnCANCEL);

}

function MessageBox$create( message )

{

var divId = MessageBox.divConfig['id'];

var tableId = MessageBox.tableConfig['id'];

var div = document.getElementById( divId );

var table = document.getElementById(tableId);

var divConfig = MessageBox.divConfig;

var tableConfig = MessageBox.tableConfig;

if( div == null )

{

div = document.createElement('<div style="filter:alpha(opacity=40);position:absolute;top:0px;left:0px;"></div>');

div.id = divId;

div.style.backgroundColor = divConfig['bgColor'];

div.style.zIndex = divConfig['zIndex'];

document.body.appendChild( div );

var frame = document.createElement('<iframe style="filter:alpha(opacity=0);position:absolute;left:0px; top:0px; border-style:none;width:100%;height:100%;"></iframe>');

frame.style.zIndex = divConfig['zIndex']-1;

div.appendChild( frame );

var contentH = parseFloat( tableConfig['height'] ) - 50;

var strHTML = '<table id="'+tableId+'" style="position: absolute; filter : progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=3,offY=3,positives=true);font-size:12px; border: '+ tableConfig['borderColor'] +' 1px solid; " cellpadding="2" cellspacing="0">'

+'<tr>'

+ '<td style="height:20px; background-color: '+tableConfig['titlebgColor']+';">提示信息'

+ '</td>'

+'</tr>'

+'<tr>'

+ '<td style="height:'+contentH+'px;text-align:center;word-break:break-all;">'

+ '</td>'

+'</tr>'

+'<tr>'

+ '<td style="height:30px;text-align:center;">'

+'</tr>'

+'</table>';

document.body.insertAdjacentHTML('afterBegin',strHTML);

table = document.getElementById( tableId );

table.style.backgroundColor = tableConfig['bgColor'];

table.style.width = tableConfig['width'];

table.style.height = tableConfig['height'];

table.style.zIndex = divConfig['zIndex'] + 1;

}

div.style.display = '';

table.style.display = '';

table.rows[1].cells[0].innerHTML = message;

MessageBox.setSize(div,table);

window.attachEvent("onresize", function(){ MessageBox.setSize(div,table) } );

window.attachEvent("onscroll", function(){ MessageBox.setSize(div,table) } );

}

function MessageBox$setSize(div,table)

{

var sw = parseFloat(document.documentElement.scrollWidth);

var cw = parseFloat(document.documentElement.clientWidth);

var sh = parseFloat(document.documentElement.scrollHeight);

var ch = parseFloat(document.documentElement.clientHeight);

div.style.width = sw >= cw?sw:cw;

div.style.height= sh >= ch?sh:ch;

table.style.left = parseFloat(document.documentElement.scrollLeft) + cw/2 - parseFloat(table.clientWidth)/2;

table.style.top = parseFloat(document.documentElement.scrollTop) + ch/2 - parseFloat(table.clientHeight)/2;

}

function MessageBox$close()

{

document.getElementById(MessageBox.tableConfig['id']).style.display = 'none';

document.getElementById(MessageBox.divConfig['id']).style.display = 'none';

}

//==============================================================================================================

function t()

{

MessageBox.confirm('are you exit?',h);

}

function h( r )

{

alert('你选的结果是:' + r );

}

</script>

</head>

<body >

Click Me</button>

</select>

asdfasd

</form>

</body>

</html>

posted on 2007-12-18 19:03 shcity 阅读(2589) 评论(0) 编辑收藏举报

刷新页面返回顶部

notes

半透明的div对话框

导航

公告