js實現頁面遮罩層，並且阻止頁面body滾動

本文轉載自查看原文 2016-08-25 13:58 16978 前端開發/ jquery實現遮罩層阻止滾動條/ overflow:hidden/ jquery實現遮罩層/ js實現遮罩層

<!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;width: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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序實現遮罩及阻止遮罩層下的頁面滾動遮罩層出現時阻止頁面滾動 web頁面彈出遮罩層,通過js或css禁止蒙層底部頁面跟隨滾動 uniapp 禁止遮罩層下的頁面滾動遮罩層下禁止頁面滾動 mask 遮罩層彈窗禁止頁面滾動彈出層，阻止頁面滾動--阻止事件冒泡簡單的js給頁面添加遮罩層彈出頁面遮罩層，以及web端和移動端阻止遮罩層的滑動。 Angularjs 實現頁面遮罩層功能