教程集 www.jiaochengji.com
教程集 >  脚本编程  >  Asp.net  >  正文 asp.net页面弹出层 背景变灰的实现方法

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

发布时间:2016-05-23   编辑:jiaochengji.com
本文介绍下,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>

您可能感兴趣的文章:
asp.net页面弹出层 背景变灰的实现方法
photoshop处理曝光不足拍灰日出风景照后期调色教程
photoshop基础图层与蒙版使用技巧心得
Photoshop快速制作一个有渐层颜色覆盖的背景教程
photoshop快速制作简约的双色调背景图片教程
photoshop设计灰色高光质感金属文字效果制作教程
jQuery的弹窗插件 wBox
html5和css3 动态气泡按钮的实现
photoshop常用抠图工具使用经验技巧分享
photoshop快速选择工具选用技巧分享

[关闭]
~ ~