| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3590 人关注过本帖
标题:C# .net WEB 实现完善的遮罩层锁屏弹窗
只看楼主 加入收藏
tzjtzj18
Rank: 2
等 级:论坛游民
帖 子:14
专家分:40
注 册:2013-5-9
结帖率:100%
收藏
已结贴  问题点数:18 回复次数:2 
C# .net WEB 实现完善的遮罩层锁屏弹窗
实现遮罩层锁屏弹窗功能,网上有很多例子,但很多都不完善,存在这样那样的问题,总结下来有以下一些缺陷:
1、浏览器不是最大化的时候,也就是没沾满全屏,打开遮罩层锁屏弹窗功能后,再将浏览器最大化时,遮罩层只能覆盖原有部分,扩展的窗口没有被遮罩层覆盖,同时弹出的窗口位置没有根据浏览器窗口大小而变化,还在原来的位置。
2、当不出现右侧滚动条时,遮罩层覆盖浏览器窗口覆盖不全,改变浏览器窗口大小时,弹窗位置不固定。
3、右侧有滚动条时,滚动屏幕,弹出窗口位置不变化,或者弹出窗口位置跟随滚动条变化,但抖动,显示效果不流畅。
4、多种浏览器不兼容,甚至在IE类浏览器显示的效果都不相同。谷歌、IE、火狐、遨游等等浏览器,一种浏览器一个效果,不统一。
5、一些程序的代码冗长、抽象,不易修改应用。
等等…
对这些问题,参考了一些例子,逐步修改完善了代码,形成了这个较为完善的程序,解决了上述的问题。我搞C/S的,写B/S程序C/S的痕迹比较重,所以写了个html文件,运行效果相同,希望对大家有帮助。我js学的不好,解释以及代码写的可能有错误,仅供大家参考。
程序适用于.net 2.0 至 .net 4.0,C#编写。一些写法可参看以前的文章。
用户:tzjtzj18    ,    email:sohy@
实现完善的遮罩层锁屏弹窗.rar (48.77 KB)
搜索更多相关主题的帖子: 浏览器 网上 
2013-10-10 10:02
303770957
Rank: 11Rank: 11Rank: 11Rank: 11
等 级:小飞侠
威 望:6
帖 子:838
专家分:2125
注 册:2005-9-10
收藏
得分:18 
不错,写的很好。
我在你的基础上稍微做了些修改,现在将完整的代码贴上以供参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #bt
        {
            border: 2px solid #000;
            background-color: #ccc;
            cursor: pointer;
            padding: 5px 5px;
        }
        .VeryhuoCOM
        {
            position: fixed;
            _position: absolute;
            _top: expression(documentElement.scrollTop + 340 + "px");
            background: #fff;
            border: 1px solid #939395;
            width: 500px;
            height: 240px;
            top: 50%;
            left: 50%;
            margin: -200px 0 0 -250px;
            overflow: hidden;
            z-index: 99999;
            font-size: 14px;
            color: #000;
            display: none;
        }
        .VeryhuoCOM dl
        {
            overflow: hidden;
            padding: 20px;
            margin: 0;
        }
        .VeryhuoCOM dl dt
        {
            line-height: 30px;
        }
        .VeryhuoCOM dl dd
        {
            line-height: 25px;
            height: 25px;
            padding-left: 10px;
            margin: 0;
        }
        .VeryhuoCOM dl dd label
        {
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <br />
    <br />
    <div style="height: 100px;">
        <a id="bt">点击弹出div</a>
    </div>
    <div id="VeryhuoCOM" class="VeryhuoCOM" style="display: none;">
        <dl>
            <dt>请您告知我们取消订单的原因,以便我们改进。非常感谢!</dt>
            <dd>
                <input type="radio" name="reason" id="reason7" /><label for="reason7">出现商品缺货情况</label></dd>
            <dd>
                <input type="radio" name="reason" id="reason8" /><label for="reason8">其它的原因</label></dd>
            <dd>
                <input type="radio" disabled="disabled" /><label>72小时到期自动取消(不可选)</label></dd>
            <dd class="cBtn lBtn">
                <a href="#">选好了</a></dd>
            <dd class="cBtn rBtn">
                <a href="#" id="close">点击取消</a></dd>
        </dl>
    </div>
    请您告知我们取消订单的原因,以便我们改进。非常感谢!
    <script type="text/javascript">
        var MaskJson = { //使用json对象好过使用函数。
            cssStyle: "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;",
            createShadowDiv: function () {//遮罩背景
                var shadowDiv = document.createElement("div");
                shadowDiv.id = "shadowDiv";
                shadowDiv.style.cssText = this.cssStyle;
                shadowDiv.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
                var isIE = (document.all) ? true : false;
                var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
                function layer_iestyle() {
                    shadowDiv.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
                    shadowDiv.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
                }
                if (isIE) {
                    shadowDiv.style.filter = "alpha(opacity=50)";
                }
                if (isIE6) {
                    layer_iestyle();
                    window.attachEvent("onresize", layer_iestyle);
                } else {
                    layer_iestyle();
                    window.addEventListener("resize", layer_iestyle, false);
                }
                shadowDiv.style.backgroundColor = "#000"
                shadowDiv.style.zindex = 100;
                document.body.appendChild(shadowDiv);
            },
            createIframe: function () {  //shadowIframe
                var iframe = document.createElement("iframe");
                iframe.id = "shadowIframe";
                iframe.style.cssText = this.cssStyle;
                iframe.frameBorder = 0;
                iframe.style.height = document.body.scrollHeight + "px";
                iframe.style.zindex = 99;
                document.body.appendChild(iframe);
            },
            createMask: function () {
                this.createIframe();
                this.createShadowDiv();
            },
            removeMask: function () {
                document.body.removeChild(document.getElementById("shadowDiv"));
                document.body.removeChild(document.getElementById("shadowIframe"));
            },
            onclick: function (openButtonID, divMaskID, closeButtonID) {
                //openButtonID:打开遮罩层元素的id
                //divMaskID:遮罩层元素的id(一般都是div)
                //closeButtonID:关闭遮罩层元素的id
                var that = this;
                document.getElementById(openButtonID).onclick = function () {
                    if (window.ActiveXObject) {//ie6
                        if (!window.XMLHttpRequest) {
                            document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";
                        }
                    }
                    document.getElementById(divMaskID).style.display = "block";
                    that.createMask();
                }
                document.getElementById(closeButtonID).onclick = function () {
                    document.getElementById(divMaskID).style.display = "none";
                    that.removeMask();
                }
            }
        };
        MaskJson.onclick("bt", "VeryhuoCOM", "close");
    </script>
</body>
</html>


[ 本帖最后由 303770957 于 2013-10-12 23:46 编辑 ]

♂ 死后定当长眠,生前何须久睡。♀
2013-10-12 22:37
tzjtzj18
Rank: 2
等 级:论坛游民
帖 子:14
专家分:40
注 册:2013-5-9
收藏
得分:0 
谢谢,学习了
2013-10-13 11:58
快速回复:C# .net WEB 实现完善的遮罩层锁屏弹窗
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018918 second(s), 10 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved