asp.net页面弹出层 背景变灰的实现方法

发布时间:2020-08-28编辑:脚本学堂
本文介绍下,asp.net页面中弹出层,背景颜色变灰,不能操作其它内容的实现方法,有需要的朋友参考下。

在很多的图片站中,都会见到这样的效果:
点击某个图片,弹出一个层来显示大图,然后背景变灰,其它内容就点不动了。

本节也实现一个这样的效果,有兴趣的朋友,参考下。

1,aspx页面:
 

复制代码 代码示例:
#bgDiv
{
display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
#ElseAddressDiv
{
width: 700px;
height: 290px;
position:absolute;
padding: 10px;
vertical-align: middle;
border: solid 3px #ff8300;
z-index: 10001;
display: none;
background-color:White;
}
<div id="bgDiv">
</div>
<div id="ElseAddressDiv">
<div>

2,js代码:
 

复制代码 代码示例:

<script>
function invokeOpen()
{
    document.getElementById("ElseAddressDiv").style.display="block";
    //背景
    var bgObj=document.getElementById("bgDiv");
    bgObj.style.display="block";
    bgObj.style.width = document.body.offsetWidth + "px";
    bgObj.style.height = screen.height + "px";

    //定义窗口
    //var msgObj=document.getElementById("ElseAddressDiv");
    //msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
}
function invokeClose()
{
    document.getElementById("ElseAddressDiv").style.display="none";
    document.getElementById("bgDiv").style.display="none";
    //document.getElementById("CheckElseAddress").setAttribute("checked","false");
    //document.getElementById("MoRenAddress").setAttribute("checked","true");
}
</script>