• js实现页面遮罩层,并且阻止页面body滚动


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>DIV CSS遮罩层</title>
        <script language="javascript" type="text/javascript">
            function showdiv() {
                document.getElementById("bg").style.display ="block";
                document.getElementById("show").style.display ="block";
            }
            function hidediv() {
                document.getElementById("bg").style.display ='none';
                document.getElementById("show").style.display ='none';
            }
        </script>
        <style type="text/css">
            #bg {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index: 1001;
                -moz-opacity: 0.7;
                opacity: .70;
                filter: alpha(opacity=70);
            }
            #show {
                display: none;
                position: absolute;
                top: 25%;
                left: 22%;
                width: 53%;
                height: 49%;
                padding: 8px;
                border: 8px solid #E8E9F7;
                background-color: white;
                z-index: 1002;
                overflow: auto;
            }
            body
            {
                padding-top: 100px;
            }
        </style>
    </head>
    <body>
    <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
    <div id="bg"></div>
    <div id="show">测试
        <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
    </div>
    </body>
    </html>

    发现当有滚动条时就出现问题了。

    经过改动的代码如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>DIV CSS遮罩层</title>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script language="javascript" type="text/javascript">
            function showdiv() {
                document.getElementById("bg").style.display ="block";
                document.getElementById("show").style.display ="block";
    
                $('body').css("overflow", "hidden")
            }
            function hidediv() {
                document.getElementById("bg").style.display = 'none';
                document.getElementById("show").style.display = 'none';
                $('body').css("overflow", "auto")
            }
        </script>
        <style type="text/css">
            #bg {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background-color: black;
                z-index: 1001;
                -moz-opacity: 0.7;
                opacity: .70;
                filter: alpha(opacity=70);
            }
            #show {
                display: none;
                position: absolute;
                top: 25%;
                left: 22%;
                width: 53%;
                height: 49%;
                padding: 8px;
                border: 8px solid #E8E9F7;
                background-color: white;
                z-index: 1002;
                overflow: auto;
            }
            body {
    padding-top: 300px;
            }
        </style>
    </head>
    <body>
    <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
    <div id="bg"></div>
    <div id="show">测试
        <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
    
    
    
    </div>
    
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    
    
    </body>
    </html>

    完美解决。

    从上面的问题中我们总结出以上两条经验。

    1、fixed的的作用是

    overflow:hidden。才有效,如果页面有滚动条,fixed的意义是不存在的。这是fixed的bug

    2、让一个层在body中全部占满有下面的方式

    1、left:0;top:0;100%;height:100%;position:fixed
    2、left:0;top:0;right:0;bottom:0;posioton:fixed;
    非常感谢下面博主的链接问题才得以解决,感谢互联网时代的分享精神。

    http://www.cnblogs.com/kaisela/archive/2014/05/21/3740898.html

  • 相关阅读:
    如何制定自己的博客园皮肤
    Notepad++ PluginManager安装常用插件
    Python进阶5---StringIO和BytesIO、路径操作、OS模块、shutil模块
    Python进阶4---Python的文件IO
    Python进阶3---python类型注解、functools
    dreamweavercs 和dreamweaver cc的區別
    Dreamweaver怎样用Edge Web Fonts功能
    vs code軟件操作
    vscode git設置
    git和svn的區別
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/5806510.html
Copyright © 2020-2023  润新知