万能给任何页面加蒙层！！！

红太狼 2022-12-21 13:58 81阅读 0赞

依旧废话不多说，直接上代码

var searchMask = document.getElementById('InputSearchMask');
      searchMask = document.createElement('div');
      searchMask.id = 'InputSearchMask';
      searchMask.style.display = 'none';
      searchMask.style.position = 'fixed';
      searchMask.style.top = 0;
      searchMask.style.left = 0;
      searchMask.style.bottom = 0;
      searchMask.style.right = 0;
      searchMask.style.backgroundColor = 'rgba(0,0,0,.5)';
      document.body.appendChild(searchMask);
    
      const Button = document.getElementById('button');
      Button.addEventListener('click',function(){
        console.info('done');
        searchMask.style.display = 'block';
      });
    
      searchMask.addEventListener('click',function(){
        console.info('click Mask');
        searchMask.style.display = 'none';
      })

### 在React中 ###

1、先用useEffect创建dom元素

useEffect(() => {
        let searchMask = document.getElementById('InputSearchMask');
        searchMask = document.createElement('div');
        searchMask.id = 'InputSearchMask';
        searchMask.style.display = 'none';
        searchMask.style.position = 'fixed';
        searchMask.style.top = 0;
        searchMask.style.left = 0;
        searchMask.style.bottom = 0;
        searchMask.style.right = 0;
        searchMask.style.backgroundColor = 'rgba(0,0,0,.4)';
        document.body.appendChild(searchMask);
    
        searchMask.addEventListener('click',() => {
          searchMask.style.display = 'none';
        })
      }, []);

2、在事件中触发

onClick={event => {
       const searchMask = document.getElementById('InputSearchMask');
       searchMask.style.display = 'block';
     }}

发表评论取消回复

表情：

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

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

相关阅读

相关阿里为什么建议给MVC三层架构多加一层Manager层？

我们在刚刚成为程序员的时候，就会被前辈们 “教育” 说系统的设计要遵循 MVC（Model-View-Controller）架构。它将整体的系统分成了 Model（模型），Vi

古城微笑少年丶/ 2023年09月24日 17:11/ 0 赞/ 17 阅读

相关 android 渐变蒙版_Flutter新手引导蒙版（浮层）

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。重要消息 f lutter中网络请求dio使用分析视频教程在这里 Flutter 从入

Bertha 。/ 2023年01月02日 03:21/ 0 赞/ 254 阅读

相关万能给任何页面加蒙层！！！

依旧废话不多说，直接上代码 var searchMask = document.getElementById('InputSearchMask'); se

红太狼/ 2022年12月21日 13:58/ 0 赞/ 82 阅读

相关 css3、scss给图片加遮罩层

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 11:46/ 0 赞/ 162 阅读

相关 html5页面蒙版原理,js如何实现蒙版效果

![5268f80b9b1e01f982625ef6fac83ca1.png][] ![a8d5d05949a7497d6df0b0c3c38d7dde.png][] 我们

我会带着你远行/ 2022年10月05日 15:54/ 0 赞/ 264 阅读

相关万能钥匙-中间层

最近小菜刀重读《程序员的自我修养》，里面提到过一句名言：计算机科学领域的任何问题都可以通过增加一个间接的中间层来解决。上述名言概括了计算机系统软件体系结构的设计要点，

╰+哭是因爲堅強的太久メ/ 2022年09月03日 09:26/ 0 赞/ 276 阅读

相关 jq给页面添加覆盖层遮罩

先引入jq代码，然后代码如下： $(function(){ var docHeight = $(document).height(); //获

「爱情、让人受尽委屈。」/ 2022年08月11日 05:58/ 0 赞/ 147 阅读

相关 PS学习笔记----图层蒙版

图层蒙版：用以控制画面的显示和隐藏，从而实现图像的合成等操作。操作： 1.选中图层 2.单击“添加图层蒙版”按钮。 “蒙版

小鱼儿/ 2022年08月04日 12:38/ 0 赞/ 207 阅读

相关万能的JAVA任何格式日期转换工具类

过程中，被dash.length()坑了一把。废话少说，上coding. public static Date convertStrToDat

客官°小女子只卖身不卖艺/ 2022年05月09日 00:52/ 0 赞/ 177 阅读

相关 jq封装蒙层小插件，蒙层滑动页面不滑动

蒙层用的挺多的，有些东西需要设置也挺繁琐的，封装成一个小方法以供下次方便使用。 (function () { function Init (option

迈不过友情╰/ 2022年04月03日 14:28/ 0 赞/ 158 阅读