上传照片代码记录（1） ——实现周围透明灰色，中间可以操作的对话框效果

 

上传照片功能中将呈现一种特效，如下图所示：

                 

中间呈现为可用对话框，页面周围为灰色、不可用的视觉效果。具体实现代码如下：

实现代码共分为三部分，下面的代码是从一个特效制作的网站上找到的源码：  

1）页面前台代码

   <form id="Form1" runat="server">

          //中间可用的现实区域

    <div id="msgDiv">

        <div id="msgShut">关闭</div>   //关闭按钮

        <div id="msgDetail"></div>     //用来盛放所有可操作的空间的div

    </div>         

         //用来遮挡整个页面的灰色div

         <div id="bgDiv"></div>  

         <p><a href="#" οnclick="showDetail('hello')">点击我，试试看</a></p>

    </form>

2）css样式代码

<style>

        body

        {

            font-size: 12px;

            background: #9EC7E7;

        }

        img

        {

            border: 0px;

        }

        #msgDiv

        {

            z-index: 10001;

            width: 500px;

            height: 400px;

            background: white;

            border: #336699 1px solid;

            position: absolute;

            left: 50%;

            top: 20%;

            font-size: 12px;

            margin-left: -225px;

            display: none;

        }

             //用来遮挡整个页面的div样式

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

        }

</style>

3）js函数

 //用来响应单机“<a href="#" οnclick="showDetail('hello')">点击我，试试看</a>”这个超链接的js函数

   <script type="text/javascript">

        function showDetail(id)

 {

            //背景1

            var bgObj = document.getElementById("bgDiv");

            bgObj.style.width = document.body.offsetWidth + "px";

            bgObj.style.height = screen.height + "px";

 

            //定义窗口

            var msgObj = document.getElementById("msgDiv");

            msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";

 

            //关闭

            document.getElementById("msgShut").onclick = function () {

                bgObj.style.display = msgObj.style.display = "none";

            }

            msgObj.style.display = bgObj.style.display = "block";

        }

    </script>

 

            其实从实现的原理上其实特别简单，就是通过两个div设置为不显示的（这里有特点的属性filter设置为半透明）。然后通过调用js函数调整div的大小就可以实现我们想要的效果了。 

          虽然从网上找到了这样简单有效的代码，但是实际运用上出现了一些问题。我将css样式，js函数都挪到了css和js特有的文件当中去了，并实现了引用。但是如论怎样尝试，效果依然不能出现，很让我头疼。更头疼的是，我新建了一个解决方案，结果实现了。

         既然新建的解决方案能够实现，说明代码是没有问题的，引用也是没有问题的。通过不断的比较最后终于发现，二者唯一的不同点就是在于，原有的页面运用了母版，而新建的没有运用母版。既然区别找到了，并且是唯一的区别，那么问题肯定就出在他身上。

        最后通过代码的不断改动最后终于实现了，解决方法是将遮挡整个页面的div挪到母版当中就可以了。

        这样的结论让我欢喜让我愁，这么一点点差别效果竟然如此不用。