之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。
最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就没有问题了。
以下为测试代码 ，有兴趣的童鞋可以试试看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mask</title>
<style>
body {
height: 1000px;
}
.mask1 {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
background: rgba(0, 0, 0, 0.4);
}
.mask2 {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
document.onclick = function(e) {
var id = e.srcElement.id;
if(id != "mask1" && id != "mask2") {
document.querySelector(".mask1").style.display = "none";
document.querySelector(".mask2").style.display = "none";
}
};
window.onload = function(){
document.querySelector("#mask1").onclick = function(e) {
document.querySelector(".mask1").style.display = "block";
};
document.querySelector("#mask2").onclick = function(e) {
document.querySelector(".mask2").style.display = "block";
};
};
</script>
</head>
<body>
<div class="divcss5">
<button id="mask1" type="button">mask1</button>
<button id="mask2" type="button">mask2</button>
</div>
<div class="mask1"></div>
<div class="mask2"></div>
</body>
</html>
相关推荐
下面将详细介绍如何在微信小程序中实现这样的全屏遮罩层，并提供相关的代码示例。 首先，我们需要创建一个全局样式文件（如`app.wxss`），在此文件中定义全屏遮罩层的基本样式。一般来说，遮罩层是一个全屏的div...
全屏遮罩是一种半透明的覆盖层，它覆盖整个网页，让用户知道当前页面已处于非交互状态。遮罩的颜色通常是淡灰色或黑色，具有一定的透明度，使得用户能够隐约看到页面背景，但无法直接与页面内容进行交互。这样做是...
本资源"页面遮罩四种方式.rar"包含了一种特别完整的、可拖动的页面遮罩实现方法，并且在代码中添加了注释，便于理解和应用。下面我们将详细讨论这四种页面遮罩的实现方式及其重要性。 首先，页面遮罩通常用于以下...
遮罩层是一种全屏覆盖的半透明层，用于在特定操作（如加载、弹窗、提示信息）期间隐藏页面内容，提供视觉焦点并防止用户误操作。在CSS中，我们可以通过以下方式创建遮罩层： 1. **创建HTML结构**：同样，首先需要一...
"全屏遮罩"是指在整个屏幕范围内应用遮罩层，尤其在执行全屏操作如视频播放、地图查看等时，可以提供更好的专注度，同时也能在加载全屏内容时给出加载指示。 "兼容ie、谷歌、火狐等浏览器"则强调了跨浏览器的兼容性...
标题“弹出带视频播放器全屏遮罩层”指的是在网页中实现一个功能，当用户触发特定操作时，会弹出一个全屏的遮罩层，并在这个遮罩层上显示一个视频播放器。这个遮罩层允许用户专注于观看视频，而不会受到页面其他元素...
"CSS3实现Loading加载，页面遮罩层的应用"这一主题，旨在探讨如何利用CSS3来创建吸引人的加载动画以及有效的页面遮罩层，以提升用户的浏览体验。 1. CSS3 Loading加载： - `@keyframes` 规则：这是CSS3中定义动画...
全屏遮罩导航菜单是一种流行的网页设计趋势，它可以覆盖整个页面，提供清晰的焦点和独特的用户体验。这种设计通常包括以下组件： 1. 菜单按钮：通常是一个汉堡图标或其他图标，点击后触发遮罩层显示。 2. 遮罩层：...
本文将详细介绍如何使用`div+css`构建框架，并实现全屏遮罩加载特效。 首先，理解`div+css`的基础知识至关重要。`div`是HTML中的一个块级元素，它可以用来对网页内容进行区域划分，而`CSS`（层叠样式表）则负责控制...
在这个示例中，我们创建了两个函数 `toggleFullScreenMask` 和 `toggleLocalMask`，分别用于控制全屏遮罩和局部遮罩的显示与关闭。全屏遮罩使用 `$("#mask")` 选择器，而局部遮罩则动态创建并附加到特定元素上。`...
在这个特效中，当用户鼠标滑过菜单项，一个半透明的全屏遮罩会覆盖整个页面。这个遮罩可能是通过动态创建和添加CSS类来实现的，使用CSS的`opacity`属性控制透明度，`position`属性设置为`fixed`以实现全屏铺展，同时...
这种技术利用了jQuery库的强大功能，结合CSS3来实现全屏图片的无缝轮播和透明遮罩效果，以提供用户友好的浏览体验。以下是关于这个主题的详细知识： 1. **jQuery库**：jQuery是一个广泛使用的JavaScript库，简化了...
"js 页面全部遮罩层"这个话题涉及到使用JavaScript（通常借助jQuery库）来实现全屏遮罩效果，包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解： 首先，我们需要理解遮罩层的基本概念。遮罩层通常...
标题中的“全屏遮罩导航栏HTML5特效.zip”指的是一个使用HTML5和CSS3技术实现的网页设计资源，它包含了一个全屏遮罩效果的导航栏。这种特效通常用于增强用户体验，当用户滚动页面或者点击某个按钮时，导航栏会以遮罩...
1. **HTML结构**：在页面中创建一个CSS类，比如`.mask`，用于定义遮罩层的样式，例如设置背景颜色、透明度和全屏布局。 2. **CSS样式**：通过CSS控制遮罩层的显示和隐藏。通常会使用`display:none`来隐藏遮罩层，并...
这个压缩包很可能包含一个实现全屏遮罩菜单列表的示例代码，这样的效果常用于现代网页设计中，以提供用户友好的导航体验。 1. **JavaScript**： - 事件处理：JavaScript通常用于监听用户的交互行为，如点击按钮，...
2. **遮罩层**：为了实现遮罩效果，我们需要在子页面中添加一个全屏的透明div，作为遮罩层。这个div通常设置为全屏尺寸，并设置较低的不透明度，以达到半透明的效果。同时，它的初始样式也需要设置为隐藏。 3. **...
在网页设计中，有时我们需要在页面中添加一个遮罩层，以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能，结合`right.html`, `main.html`, `left.html`, `top....
压缩包中的每个HTML文件（如index10.html、index12.html等）代表了一个不同的菜单设计或实现，通过比较和学习这些示例，开发者可以了解到多种不同的实现方式，从而根据项目需求选择或借鉴合适的设计。 总结来说，这...
在网页设计和用户体验优化中，记录页面停留时间和实现遮罩层是两个重要的技术点。页面停留时间可以帮助开发者和网站所有者了解用户对特定内容的兴趣程度，而遮罩层则常用于提示、加载或阻挡背景干扰，提升交互体验。...