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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js+div+css模拟弹出对话框_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5333字，纯文字阅读大概需要8分钟。

内容图文

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

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

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

</ script >

</ head >

< 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" > 百度 </ a >< br />
< select >
< option selected ="selected" > 1 </ option >
< option > 2 </ option >
</ select >< 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" > 请输入用户名及密码 </ td >
</ tr >
< tr >
< td > 用户名 </ td >
< td >
< input name ="TextBox1" type ="text" id ="TextBox1" />
</ td >
< td ></ td >
</ tr >
< tr >
< td > 密码 </ td >
< td >
< input name ="TextBox2" type ="text" id ="TextBox2" /></ td >
< td ></ td >
</ tr >
< tr >
< td ></ 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 >
< td > </ td >
</ tr >
</ table >
</ div >

</ body >
</ html >

内容总结

以上是互联网集市为您收集整理的js+div+css模拟弹出对话框_html/css_WEB-ITnose全部内容，希望文章能够帮你解决js+div+css模拟弹出对话框_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端