遮罩层以下内容不可滚动的实现

最新推荐文章于 2023-11-08 11:33:45 发布

置顶慕纳兰

最新推荐文章于 2023-11-08 11:33:45 发布

阅读量1w

点赞数 2

分类专栏：前端文章标签：遮罩弹出层不可滚动

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>遮罩层</title>
            <style type="text/css">
                *{
                   padding: 0;
                   margin: 0;
                }
                .mask {
                        position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
                        z-index: 1002;
                        left: 0px;
                        opacity:0.5;
                        -moz-opacity:0.5;
                    }

                li{
                   list-style: none;
                   width: 100%;
                   height: 200px;
                   border: 1px solid red;
                   background: #0088CC;
                   text-align: center;

                }
    </style>
   </head>
   <body>
            <div id="mask" class="mask">
               <span id="close" style="color: white;font-size: 3rem;display: block; margin-top:300px;margin-left: 760px;" οnclick="hideMask()">
                   点击关闭遮罩层
               </span>
            </div>
            <a href="javascript:;" οnclick="showMask()" >点我显示遮罩层</a><br />

            <ul>
               <li>你好</li>
               <li>世界</li>
               <li>你好1</li>
               <li>世界1</li>
               <li>你好2</li>
               <li>世界2</li>
               <li>你好3</li>
               <li>世界3</li>
               <li>你好4</li>
            </ul>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">

        //网页加载时弹出遮罩层
           $(function(){
               window.οnlοad=function(){
                   showMask();
               }
           });

       //遮罩层，兼容火狐、IE8
            function showMask(){
                $("#mask").css("height",$(document).height());
                $("#mask").css("width","100%");
       //宽度如果设置成$(document).width()；的话屏幕大遮罩右边会有留白
        //$("#mask").css("width",$(document).width());
                $("#mask").show();
       //使其遮罩下方内容不可滚动
                $('body').css("overflow","hidden");
            }
       //关闭遮罩层
            function hideMask(){
                $("#mask").hide();
                $('body').css("overflow","auto");
            }
        </script>
   </body>
</html>