div遮罩层

article/2025/8/29 9:09:54

实现遮盖层，使一部分区域不可点击编辑等。

1.简易遮罩层一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>遮罩层（弹窗）</title><style>#cover{ position:absolute;left:0px;top:0px;background:rgba(0, 0, 0, 0.4);width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/height:100%;filter:alpha(opacity=60);  /*设置透明度为60%*/opacity:0.6;  /*非IE浏览器下设置透明度为60%*/display:none; z-Index:1;  }#modal{ position:absolute;width:500px;height:300px;top:50%;left:50%;background-color:#fff;display:none;cursor:pointer;z-Index:2;  }</style>
</head>
<body><div>显示页面的全部内容<div id="opens">打开弹框</div></div><!-- //页面的遮罩层 --><div id="cover"></div><!-- //页面的弹出框 --><div id="modal"><div id="closes">关闭弹框</div></div><script>var opens = document.querySelector("#opens");var closes = document.querySelector("#closes");var cover = document.querySelector("#cover");var modal = document.querySelector("#modal");opens.onclick = function(){cover.style.display="block";   //显示遮罩层modal.style.display="block";   //显示弹出层};closes.onclick = function(){cover.style.display="none";   //隐藏遮罩层modal.style.display="none";   //隐藏弹出层};</script>
</body>
</html>

结果：

2.div遮罩层二：

可通过点击实现遮罩层，改变div背景色，宽高： 

  •  专门写一个div（没有任何内容）做遮罩层，通过绝对定位的层级实现遮罩；
  • 宽度高度设置为100%，这样才能使隐藏背景层覆盖原页面。
  • 设置透明度为0.3；
  • （兼容IE）非IE浏览器下设置透明度为30；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>揉捏DIV</title><style>ul,li { margin:0; padding: 0; }#wrap { position: absolute; z-index: 1;}h1 { display: inline; } .set_btn { background: red; border: none; width:100px; height: 30px; color: white; font-size: 16px; }#box { width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; }   /* 专门写一个div做遮罩层，通过绝对定位的层级实现遮罩 *//*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ /*设置透明度为60%*//*非IE浏览器下设置透明度为60%*/#cover { position:absolute; left:0px; top:0px; background:#747374; width:100%; height:100%; filter:alpha(opacity=60); opacity:0.3; display:none; z-index:1; }#mask { display: none; width:300px; height: 240px; background: white; border: 10px solid gainsboro; position: absolute; z-index: 2; left:40%; top:40%; }#mask ul { width:300px; height: 180px; padding-top: 10px; }#mask li { list-style: none; height: 60px; padding-left: 10px; }#mask label { display: inline-block; width: 120px; }#mask span { display: inline-block; width: 40px; height: 40px; line-height: 40px; background: gainsboro; text-align: center; border: 1px solid gray;  } #mask .title .red { background: red; }#mask .title .yellow { background: yellow; }#mask .title .blue { background: blue; }#mask input { background: #3f379e; border: none; color: white; width: 50px; height: 20px; text-align: center; }#mask .btn_div { margin: 0 auto; width: 106px;}</style>
</head>
<body><div id="wrap"><h1>请为下面DIV设置样式：</h1><!-- <input class="set_btn" type="button" value="点击设置"/> --><button class="set_btn">点击设置</button><div id="box"></div></div><div id="cover"></div><div id="mask"><ul><li class="title"><label>请选择背景色：</label><span class="red">红</span><span class="yellow">黄</span><span class="blue">蓝</span></li><li><label>请选择宽(px)：</label><span class="w200">200</span><span class="w300">300</span><span class="w400">400</span></li><li><label>请选择高(px)：</label><span class="h200">200</span><span class="h300">300</span><span class="h400">400</span></li>    </ul><div class="btn_div"><input class="reset_btn" type="button" value="恢复"/><input class="fix_btn" type="button" value="确定"/></div>
</div><script>//弹出遮罩层var cover = document.querySelector("#cover");var set_btn = document.querySelector(".set_btn");var mask = document.querySelector("#mask");var box = document.querySelector("#box");set_btn.onclick = function(){cover.style.display="block";//弹出层mask.style.display="block";//弹出窗};//隐藏遮罩层var reset_btn = document.querySelector(".reset_btn");var fix_btn = document.querySelector(".fix_btn");reset_btn.onclick = function(){cover.style.display="none";//弹出层mask.style.display="none";//弹出窗box.style.cssText = "width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; ";};fix_btn.onclick = function(){cover.style.display="none";//弹出层mask.style.display="none";//弹出窗};//点击红黄蓝更改box背景色var red = document.querySelector(".red");var yellow = document.querySelector(".yellow");var blue = document.querySelector(".blue");red.onclick = function(){box.style.background = "red";};yellow.onclick = function(){box.style.background = "yellow";};blue.onclick = function(){box.style.background = "blue";};//点击宽高对应更改box宽高var w200 = document.querySelector(".w200");var w300 = document.querySelector(".w300");var w400 = document.querySelector(".w400");var h200 = document.querySelector(".h200");var h300 = document.querySelector(".h300");var h400 = document.querySelector(".h400");w200.onclick = function(){box.style.width = "200px";};w300.onclick = function(){box.style.width = "300px";};w400.onclick = function(){box.style.width = "400px";};h200.onclick = function(){box.style.height = "200px";};h300.onclick = function(){box.style.height = "300px";};h400.onclick = function(){box.style.height = "400px";};</script>
</body>
</html>

结果：


http://chatgpt.dhexx.cn/article/78kGcQZT.shtml

相关文章

CSS mask遮罩

CSS mask遮罩

一、CSS mask遮罩的过往和现状 CSS mask遮罩属性的历史非常久远了&#xff0c;远到比CSS3 border-radius等属性还要久远&#xff0c;最早是出现在Safari浏览器上的&#xff0c;差不多可以追溯到09年。 不过那个时候&#xff0c;遮罩只能作为实验性的属性&#xff0c;做一些特…
阅读更多...
spin遮罩

spin遮罩

旋转遮罩 前言知识基石?和&#xff01;[ ]和.样式css样式选择器 数据类型Symble获取Symbol.toPrimitive 对象属性定义ToPrimitive ( input [ , preferredType ] ) void 0&undefinedhasOwnProperty空对象对象拷贝assign深拷贝 spin__assign默认属性 前言 我们加载资源等待…
阅读更多...
遮罩和蒙版

遮罩和蒙版

遮罩&#xff1a;即遮挡、遮盖&#xff0c;部分画面被遮挡&#xff0c;相当于一个窗口&#xff0c;它是一个单独的图层&#xff0c;上面的图层会遮挡下面的图层。即通过上面的图层遮挡下面的图片&#xff0c;起到遮挡的效果。时间轴上一个视频轨上的素材对应一个图层。 蒙版&am…
阅读更多...
遮罩和蒙版有什么区别，视频遮罩怎么用

遮罩和蒙版有什么区别，视频遮罩怎么用

在制作短视频时&#xff0c;好多小伙伴分不清遮罩与蒙版的区别&#xff0c;甚至有的人认为它们就是一个东西&#xff0c;要说起来&#xff0c;这两个看似一样的概念&#xff0c;其实还是有很大的区别&#xff0c;今天就来带各位了解一下遮罩和蒙版有什么区别&#xff0c;视频遮…
阅读更多...
oracle手动锁表和解锁_oracle锁表查询和解锁方法是什么

oracle手动锁表和解锁_oracle锁表查询和解锁方法是什么

oracle锁表查询和解锁方法&#xff1a;首先使用【PL/SQL Developer】连接并操作oracle数据库&#xff1b;然后使用语句select for update来锁表&#xff1b;最后用语句【alter system kill session sid】解锁。 本文操作环境&#xff1a;Windows7系统&#xff0c;PL/SQL Develo…
阅读更多...
Oracle查询被锁表和解锁方法

Oracle查询被锁表和解锁方法

一、权限问题&#xff1a; 查询被锁表必须具有管理员权限的账号才能查询。system/manager或者其他已经被赋权的用户。 二、查询锁表语句&#xff1a; select object_name, l.oracle_username, machine, s.sid, s.serial# from v$locked_object l, dba_objects o, v$session…
阅读更多...
Oracle 锁表问题查询处理

Oracle 锁表问题查询处理

数据库操作语句的分类 DDL&#xff1a;数据库模式定义语言&#xff0c;关键字&#xff1a;create DML&#xff1a;数据操纵语言&#xff0c;关键字&#xff1a;Insert、delete、update DCL&#xff1a;数据库控制语言 &#xff0c;关键字&#xff1a;grant、remove DQL&#x…
阅读更多...
oracle中锁表是什么,oracle锁表查询和解锁方法是什么,oracle锁表和解锁

oracle中锁表是什么,oracle锁表查询和解锁方法是什么,oracle锁表和解锁

oracle锁表查询和解锁方法是什么甲骨文锁表的查询和解锁方法是什么&#xff0c;oracle锁表查询和解锁方法&#xff1a;首先使用PL/SQL Developer连接和操作Oracle数据库&#xff1b;然后使用select语句进行更新来锁定表&#xff1b;最后&#xff0c;用[alter system kill sessi…
阅读更多...
Oracle锁表查询和解锁方法

Oracle锁表查询和解锁方法

我们这里一般用的PL/SQL,总是无意间把表锁住&#xff0c;所以我今天就整理了一下简单的解锁和查询锁表的方法&#xff1b; 一、首先PL/SQL要以管理员的账号&#xff08;system/admin等&#xff09;登录&#xff0c;管理员的账号和密码根据个人设置而来&#xff0c;连接为一般选…
阅读更多...
internal/modules/cjs/loader.js:638异常问题解决

internal/modules/cjs/loader.js:638异常问题解决

在使用webpack安装插件&#xff0c;运行项目internal/modules/cjs/loader.js:638抛出异常信息&#xff0c;具体原因不知。 解决&#xff1a; 1、删除node_module文件&#xff0c;删除package-lock.json文件 2、重新npm install 3、重新运行&#xff0c;没有再报异常
阅读更多...
运行node时报错：events.js:167 throw er; // Unhandled 'error' event

运行node时报错：events.js:167 throw er; // Unhandled 'error' event

今天npm run dev 启动项目时报错&#xff1a; 报这个错通常是因为ip地址不正确&#xff0c;或者端口被占用。 到webpack.config.js文件中发现是因为ip地址不对&#xff1a; 解决办法&#xff1a;改成 host: 127.0.0.1&#xff0c;如果是端口被占用换个试试。 再运行npm run de…
阅读更多...
vue中vue.runtime.esm.js?2b0e:619 [Vue warn]: data functions should return an object:报错原因

vue中vue.runtime.esm.js?2b0e:619 [Vue warn]: data functions should return an object:报错原因

错误如图所示&#xff1a; 修改方法&#xff1a;在ContentBar.vue文件中的data写上return返回值。 必须写return的原因&#xff1a; 在简单的vue实例中看到的Vue实例中data属性是如下方式展示的&#xff1a; 在使用组件化的项目中使用的是如下形式&#xff1a; vue的文件data…
阅读更多...
关于vue.js前端接收到数据却始终报_this is not defined at eval 的错误

关于vue.js前端接收到数据却始终报_this is not defined at eval 的错误

之前做了一个关于作业管理的平台&#xff0c;利用ajax和后台异步通信&#xff0c;利用console.info()方法可以输出接受到的数据&#xff0c;但是一旦在成功的响应方法里面将数据赋值给前端定义的变量。就会转到failResponse的方法里面。代码如图&#xff1a; 数据已经获得成功如…
阅读更多...
Node.js之rollbackFailedOptional错误处理

Node.js之rollbackFailedOptional错误处理

Paste_Image.png 这个错误可以简单的理解为 就是网不好 &#xff0c;改用淘宝的npm镜像就好 1.修改~/.npmrc文件(没有就自行新建一个)&#xff0c;写入 registry https://registry.npm.taobao.org2.同样的方法&#xff0c;将disturl 这个配置同样指向: https://npm.taobao.o…
阅读更多...
遇见js报错应该如何解决

遇见js报错应该如何解决

看控制台信息&#xff01;&#xff01;&#xff01; 我遇见过很多才开始学写代码的人&#xff0c;当然我自己以前也是那样的&#xff0c;面对代码报错我不知道应该如何做&#xff0c;不知道如何解决。随着学习时间的增加&#xff0c;我发现所有的语言都会有报错信息&#xff0…
阅读更多...
Vue引入JQuery报错caught ReferenceError: jQuery is not defined

Vue引入JQuery报错caught ReferenceError: jQuery is not defined

报错信息: caught ReferenceError: jQuery is not defined 原因分析&#xff1a;不详&#xff0c;本人前端处于幼儿园水平 错误截图&#xff1a; 解决办法&#xff1a; 在vue.config.js 中添加红色方框中的两段代码 const { defineConfig } require(vue/cli-service) con…
阅读更多...
vue开发中遇到Forced reflow while executing JavaScript took

vue开发中遇到Forced reflow while executing JavaScript took

在vue的开发过程中&#xff0c;遇到了如图所示的警告提示&#xff0c;我页面中包含有一个毫秒倒计时&#xff0c;swiper插件等&#xff0c;还有有一个答题卡组件&#xff0c;组件是通过来控制显示的&#xff0c;但是这里每次在页面点击改变isAnswerCardOpen的值是&#xff0c;就…
阅读更多...
解决vue创建新项目与版本查看，报错“internal/modules/cjs/loader.js:1032 throw err；

解决vue创建新项目与版本查看，报错“internal/modules/cjs/loader.js:1032 throw err；

查看vue版本或者是新建vue项目都会这个错误&#xff0c;重新安装vue-cli也会报错 解决方案&#xff1a; 先查看自己vue安装的位置 执行代码&#xff1a; where vue获取到vue文件的位置进行删除 1.删除残留vue文件,命名语句&#xff1a; del /s /q C:\Users\17655\AppData\R…
阅读更多...
vue常见报错原因及解决

vue常见报错原因及解决

1. 关键词 Uncaught Error: [vuex] mutations should be function but "mutations.actions" in module "user" is {}. 原因&#xff1a;写错行 解决&#xff1a;写到methods函数里面 2. import 导入错误 关键词&#xff1a;TypeError: Object(...) is not …
阅读更多...
js中常见的错误

js中常见的错误

js运行报错&#xff0c;首现我们要先学会查看在哪里查看错误 打开页面点击鼠标右键审查元素&#xff08;检查&#xff09;&#xff0c;打开控制台&#xff0c;然后根据上面的提示&#xff0c;读取 相关信息&#xff0c;然后读取自己哪里错了&#xff0c;最后寻找相应代码进行…
阅读更多...
推荐文章

Copyright @ 2022~2023