js+div+css シミュレート ポップアップ ダイアログ ボックス_html/css_WEB-ITnose

今日は時間があったので、IE5.5-8とffでテストに合格したので、皆さんに共有したいと思います。

<頭＞
<; meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />

< style type ="text/css" >
.hideDlg
{
高さ : 129px ;幅: 368ピクセル;
表示 : なし ;
}
.showDlg
{
背景色 : #ffffdd ;
ボーダー幅 : 3px ;
ボーダースタイル: ソリッド;
高さ: 129ピクセル;幅: 368ピクセル;
位置 : 絶対 ;  
表示 : ブロック ;
z インデックス : 5 ;
}
.showDeck {
表示 : ブロック ;
トップ : 0px ;
左 : 0px ;
マージン: 0px ;
パディング: 0px ;
幅 : 100% ;
高さ : 100% ;
位置 : 絶対;
z インデックス : 3 ;
背景: #cccccc ;
}
.hideDeck
{
表示 : なし ;
}


<スクリプトタイプ ="text/javascript" >
function showDlg()
{
// 显示遮蔽的层
var objDeck = document.getElementById( "デッキ " );
if ( ! objDeck)
{
objDeck = document.createElement( " div " );
objDeck.id = "デッキ" ;
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();

}

関数 cancel()
{
        document.getElementById( ' divBox ' ).className = ' hideDlg ' ;
document.getElementById( " デッキ " ).className = " HideDeck " ;
hideOrShowSelect( false );
}

関数 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 ) ? " 無効 " ： "" ;
}
}

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();"  サイズ ="10px" />< br />
<; input type ="text" value ="" size ="10px" />< a href ="http://www.baidu.com" target ="_blank" > 百度 < br />
<;選択 >
<;オプション 選択済み ="選択済み" > 1
     < br />

< div id ="divBox" class ="hideDlg" style ="" >


输入用户名及び密码


用户名


td >


密コード

td >


td >