js+div+css模拟弹出对话框_html/css_WEB-ITnose

< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 弹出模态对话框测试[IE6下测试通过]

< style type ="text/css" >
.hideDlg
{
height : 129px ; width : 368px ;
display : none ;
}
.showDlg
{
background-color : #ffffdd ;
border-width : 3px ;
border-style : solid ;
height : 129px ; width : 368px ;
position : absolute ;
display : block ;
z-index : 5 ;
}
.showDeck {
display : block ;
top : 0px ;
left : 0px ;
margin : 0px ;
padding : 0px ;
width : 100% ;
height : 100% ;
position : absolute ;
z-index : 3 ;
background : #cccccc ;
}
.hideDeck
{
display : none ;
}


< script type ="text/javascript" >
function showDlg()
{
// 显示遮盖的层
var objDeck = document.getElementById( " deck " );
if ( ! objDeck)
{
objDeck = document.createElement( " div " );
objDeck.id = " deck " ;
document.body.appendChild(objDeck);
}
objDeck.className = " showDeck " ;
objDeck.style.filter = " alpha(opacity=50) " ;
objDeck.style.opacity = 40 / 100;
objDeck.style.MozOpacity = 40 / 100;
// 显示遮盖的层end

// 禁用select
hideOrShowSelect( true );

// 改变样式
document.getElementById( ' divBox ' ).className = ' showDlg ' ;

// 调整位置至居中
adjustLocation();

}

function cancel()
{
document.getElementById( ' divBox ' ).className = ' hideDlg ' ;
document.getElementById( " deck " ).className = " hideDeck " ;
hideOrShowSelect( false );
}

function hideOrShowSelect(v)
{
var allselect = document.getElementsByTagName( " select " );
for ( var i = 0 ; i < allselect.length; i ++ )
{
// allselect[i].style.visibility = (v==true)?"hidden":"visible";
allselect[i].disabled = (v == true ) ? " disabled " : "" ;
}
}

function adjustLocation()
{
var obox = document.getElementById( ' divBox ' );
if (obox != null && obox.style.display != " none " )
{
var w = 368 ;
var h = 129 ;
var oLeft,oTop;

if (window.innerWidth)
{
oLeft = window.pageXOffset + (window.innerWidth - w) / 2 +"px";
oTop = window.pageYOffset + (window.innerHeight - h) / 2 +"px";
}
else
{
var dde = document.documentElement;
oLeft = dde.scrollLeft + (dde.offsetWidth - w) / 2 +"px";
oTop = dde.scrollTop + (dde.offsetHeight - h) / 2 +"px";
}

obox.style.left = oLeft;
obox.style.top = oTop;
}
}





< body onresize ="adjustLocation();" >
< input type ="button" value ="click me" onclick ="showDlg();" size ="10px" />< br />
< input type ="text" value ="" size ="10px" />< a href ="http://www.baidu.com" target ="_blank" > 百度 < br />
< select >
< option selected ="selected" > 1
< option > 2
< br />

< div id ="divBox" class ="hideDlg" style ="" >
< table width ="100%" style ="height:100%; width: 100%;" id ="table1" >
< tr >
< td style ="height: 20px; text-align: center;" colspan ="3" > 请输入用户名及密码

< tr >
< td > 用户名
< td >
< input name ="TextBox1" type ="text" id ="TextBox1" />

< td >

< tr >
< td > 密码
< td >
< input name ="TextBox2" type ="text" id ="TextBox2" />
< td >

< tr >
< td >
< td >
< input type ="button" name ="Button1" value ="Login" id ="Button1" size ="10" onclick ="alert(TextBox1.value)" />
< input type ="button" name ="Button2" value ="Cancel" id ="Button2" size ="10" onclick ="cancel();" />

< td >