之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了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>
相关推荐
应用移动H5领域。CSS3 实现Loading加载，页面遮罩层的应用。
应用移动H5领域。CSS3 实现Loading加载，页面遮罩层的应用。
实现了全屏或者局部遮罩，遮罩显示后会在指定时间内自动关闭遮罩。
前几天，公司一同事让我帮忙解决用DrawerLayout时，DrawerLayout的侧边栏有种像Dialog那样的遮罩效果，而且主页面内容点击不了，他要实现的功能是：去掉遮罩效果，并且主页面内容例如Button之类的能够点击，并且触发...
步入正题： 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候...
这是一款HTML5 SVG炫酷遮罩层动画效果。该效果是在用户点击汉堡包按钮间隙全屏菜单显示时，页面的切换采用SVG图形变形的方式进行过渡动画，共6种SVG遮罩层过渡动画效果。
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 代码如下: <!doctype html> <head> <meta charset=”utf-8″ /> <title></title> <style type=”text/css”> *{}{margin:0;...
下面介绍我在项目中实现的方式，全屏遮罩，部分区域可操作,需要的朋友可以参考下
1、使用JQuery进行项目开发，搭配部分如mousewheel、wow.js、animate.css、swiper等插件实现六大滚屏子页面，...5、以伪类+动画实现每个实时视频的遮罩层+播放动画效果，以全屏弹窗实现查看图片详情以及无缝切换等等。
jquery实现的弹出层登录和无刷新切换全屏层注册特效源码，是一段非常适合现代审美观的网站登录和注册效果代码，本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层，而点击注册链接时，在当前页面内无刷新显示...
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑，先上传，以备下次使用...
基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用postMessage方法来完成基座项目和子...
要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置 position: fixed;还要有透明效果，下面是我定义的遮罩层css,取名mask 代码如下: .mask { position: fixed; width: ...
1）弹层遮罩 2）弹出层位置 top/parent 3）弹出层大小 4）是否可拖动 5）是否最大/小化 6）是否可关闭 7）确认、取消提示框 8）弹出层标题自定义 9）弹出层嵌入页面 10）弹出层拖动范围不超过原则 11）...
背景要充满全屏，而且如果页面有滚动，当模态框弹出的时候是无法滚动的； 2.内容区要水平居中显示，至于垂直方向看设计喽； 3.模态框出现是渐渐显示出来，而且从顶部滑下； 实现 遮罩使用最外层元素占满
今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决...
Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...
Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...
Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...