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

今天闲着,做了这么一个网页,在IE5.5-8,ff下测试通过,共享给大家.

弹出模态对话框测试[IE6下测试通过] title >


.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 ;
}
style >


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[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;
}
}

script >

head >



百度 a >

1 option >
2 option >
select >




请输入用户名及密码 td >
tr >

用户名 td >


td >
td >
tr >

密码 td >

td >
td >
tr >

td >



td >
td >
tr >
table >
div >

body >
html >