Question

现在。有两个按钮。如果我点击一个按钮，#mask将会显示。

我的目标是在手机上显示此网页。说实话，我需要在移动视图中点击一个图像，然后图像将改变其大小并显示在移动视图的上方。（上图表示set =＆gt; index：99999）;

这是我的代码。

<head>
    <meta charset="UTF-8">
    <title>textFixCover</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="fonts/iconfont.js"></script>
    <style type="text/css">
        html {
            background-color: #fff;
            height: 2000px;
            position: relative;
        }                   
        #mask {
            position: fix;
            top: 20px;
            left: 0;
            right: 0;       
            height: 600px;  
            display: none;
            background-color: greenyellow;
            z-index: 99999; 
        }           
        #mask .mui-slider {
            position: absolute;
            top: 20px;
            bottom: 0;
            left: 0;
            right: 0;
            height: 400px;
        }           
        #bottom-btn {
            margin-top: 1400px;
            height: 100px;
            width: 100%;
            background-color: #4CD964;          
        }           
        #top-btn {
            margin-top: 400px;
            height: 100px;
            width: 100%;
            background-color: #FF5053;
        }           
    </style>
</head>
<body>      
     <section id="top-btn"></section>        
     <select id="mask"> </select>       
     <section id="bottom-btn"></section>         
     <script type="text/javascript">
        $('#top-btn').click(function(){
            $('#mask').css('display','block');              
            setTimeout(function(){
            $('#mask').css('display','none');                
            },3000);
        });         
        $('#bottom-btn').click(function(){
            $('#mask').css('display','block');
                setTimeout(function(){
                $('#mask').css('display','none');
            },3000);
        });
     </script>
</body>

现在我遇到了问题。如果单击bottom-btn，如何在当前屏幕上设置掩码。将其设置在设备窗口的顶部。换句话说，我的意思是在设备屏幕上修复蒙版，忽略网页视图滚动。

我的目标是当我点击bottom btn时，我会在设备屏幕上看到掩码。我不需要滚动网页视图。

我在chrome控制台上调试代码来模拟移动设备

这是完美的结果。

Answer 1

我花了一些时间来了解你的问题是什么，直到我自己测试代码才得到它。代码中存在轻微错误，您需要将position的{{1}}元素设置为#mask而不是position: fixed。 '修复'不是一个值。一旦我将其更改为固定，它就像我认为你希望它一样工作。

Answer 2

您可以尝试执行以下操作：

#mask {background: rgba(255, 255, 255, 0.1);}

如何修复设备屏幕上的蒙版

2 个答案: