弹出模态对话框,背景变灰不可操纵!哪一位朋友做过啊?

changke18
等级:
可用分等级：富农
总技术分：9056
总技术分排名：2229

发表于：2008-08-23 17:29:035楼得分:20

其实就是两个div层，一个100%宽度和长度的div层（防止用户操作），放在最上面，css调整颜色为透明一点
然后在最上面放一个登陆层，从而实现遮罩效果

给你一个简介的例子

HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
<style type="text/css">
<!--
*{
   margin:0;
   padding:0;
}
html,body{
   height:100%;
}
#shadow{
   position:absolute;　
   left:0;
   top:0;
   width:100%;
   height:100%;
   background-color:#0060C0;
   filter:alpha(opacity=20);
}
#box{
   position:absolute;
   left:50%;
   top:50%;
   width:400px;
   height:180px;
   margin:-90px 0 0 -200px;
   border:1px solid #84A0C4;
   background-color:#DFE8F6;
   text-align:center;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function createDiv()
{
    var btnShow = document.getElementById("btnshow");
    btnShow.disabled=true;

    var shadow = document.createElement("div");
    shadow.setAttribute("id","shadow");
    shadow.style.zIndex="10";

    var box=document.createElement("div");
    box.setAttribute("id","box");
    box.style.zIndex="999";
    
    var spanUser=document.createElement("span");
    spanUser.innerHTML="User:";

    var textUser=document.createElement("input");
    textUser.setAttribute("type","text");
    textUser.setAttribute("id","textUser");

    var button=document.createElement("input");
    button.setAttribute("type","button");
    button.setAttribute("id","button1");
    button.setAttribute("value","Confirm");
    button.onclick=hideDiv;

    box.appendChild(spanUser);
    box.appendChild(textUser);
    box.appendChild(button);

    document.body.appendChild(shadow);
    document.body.appendChild(box);
}
function hideDiv()
{
    var textUser=document.getElementById("textUser");
    var user=document.getElementById("user");
    user.value=textUser.value;

    var box=document.getElementById("box");
    var shadow=document.getElementById("shadow");
    var btnShow=document.getElementById("btnShow");
    
    document.body.removeChild(box);
    document.body.removeChild(shadow);
    btnShow.disabled=false;   
}
-->
</script>
</head>
<body>
<div style="text-align:center">
<input id="user" type="text" />
<input id="btnshow" type="button" onclick="createDiv()" value="Display" />
</div>
</body>
</html>

修改删除举报引用回复