您的位置：首页 > 其它

遮罩效果|div弹出层|模式层

2011-03-28 23:16 459 查看

预知效果如何，查看源代码，预览效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!--  样式 -->
<style type="text/css">
/* div的 position 为 absolute 就都取绝对定位，所有的div就会叠在一起 */
/* 页面加载的时候遮罩div  和 消息 div 不显示，点击显示后再显示     */
/* 由于用第二个div来挡住页面所以第二个div的宽度和高度都是100%      */
#divMain
{
width:1024px;
height:600px;
margin:0 auto;
padding:20px;
background-color:#ccc;
z-index:1;//设置div层所处的位置
position:absolute;
}
#divLayer
{
width:100%;
height:100%;
background-color:#eee;
filter:alpha(opacity=30);/*设置半透明效果*/
opacity:0.3;/*透明度*/
z-index:2;/*设置div层所处的位置*/
position:absolute;
display:none;
cursor:not-allowed;
}
#divMsg
{
margin-top:10%;
width:240px;
height:100px;
line-height:10px;
text-align:center;
margin-left:40%;
position:absolute;
display:none;
background-color:white;
border:2px solid yellow;
z-index:3;/*设置div层所处的位置*/
}
.btn
{
border:4px solid yellow;
font-family:微软雅黑;
font-size:12px;
}
</style>

<!-- 控制脚本 -->
<script language="javascript">
function showMsg(){
/*                  得到遮罩div  &&  消息div              */
var _divLayer=document.getElementById("divLayer");
var _divMsg=document.getElementById("divMsg");
_divLayer.style.display="block";
_divMsg.style.display="block";
}
function logout(){
var _divLayer=document.getElementById("divLayer");
var _divMsg=document.getElementById("divMsg");
_divLayer.style.display="none";
_divMsg.style.display="none";
alert("login successfull!");
}
</script>
</head>
<body>

<!-- 遮罩用的div -->
<div id="divLayer">

</div>

<!-- 消息div -->
<div id="divMsg">
<div style="margin-top:7px;">username:<input  type="text" id="userName" maxLength="16"/></div>
<div style="margin-top:6px;">userpass:<input type="password" id="userPass" maxLength="16"/></div>
<div style="margin-top:8px;">
<input type="button" value="login" onclick="logout();"/>
<input type="button" value="exit" onclick="logout();"/>
</div>
</div>
<!-- 正常的div -->
<div id="divMain">
<input type="button" value=" 登 录 " id="btnLogin" class="btn" onclick="showMsg();"/>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航