复习遮罩层的运用

喜欢ヅ旅行 2022-03-17 06:56 327阅读 0赞

今天，我们来复习遮罩层的简单应用，首先在html界面我们简单的设置一个按钮，遮罩层和关闭按钮如图一，在这里插入图片描述所谓的遮罩层就是在这个div设置一个透明度的属性，我们设置为0.5，代码如图二，接下来就是最重要的部分，就是js的部分，由于现在我们还没给遮罩层设置高度，所以现在我们是看不到遮罩层的，遮罩层高度就是我们网页窗口大小的高度，这里就要设置一个全局变量height = 0；然后设置height = window innerheight，然后就是这个heigh几个px就是遮罩层的高度，还要注意的是由于我们的窗口大小是可以随意放大缩小的，然后还要设置window onresize就是窗口发生变化时在进行一次遮罩层的高度代码，然后我们为遮罩层设置display为none，用js获取按钮和关闭按钮以及遮罩层，最终代码如图三，这样，遮罩层的基本原理就是这样了。在这里插入图片描述

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui的遮罩层使用出现遮罩层覆盖弹窗情况

layui的遮罩层使用出现遮罩层覆盖弹窗情况代码如下： layer.open({ //layer提供了5种层类型。可传入的值有：0（信息框，默认）

叁歲伎倆/ 2023年07月06日 11:51/ 0 赞/ 106 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 400 阅读

相关遮罩层的使用

.mark{ top: 0; left: 0; width: 100%;

女爷i/ 2022年10月11日 12:18/ 0 赞/ 292 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 364 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 390 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 436 阅读

相关复习遮罩层的运用

今天，我们来复习遮罩层的简单应用，首先在html界面我们简单的设置一个按钮，遮罩层和关闭按钮如图一，![在这里插入图片描述][watermark_type_ZmFuZ3poZW

喜欢ヅ旅行/ 2022年03月17日 06:56/ 0 赞/ 328 阅读

相关自定义遮罩层

业务需求，又不想用网上找的。干脆自己写一个。 // obj 中的参数可以自定义。 var app_mask = { init: functi

╰半橙微兮°/ 2022年01月27日 18:09/ 0 赞/ 475 阅读

相关点击遮罩层内容区域以外的区域，关闭遮罩层

html <div class="div1"> <dl class="div2"> 内容... </dl> </div> c

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 16:36/ 0 赞/ 637 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 613 阅读