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

红太狼 2022-12-21 13:58 115阅读 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 条评论，115人围观）

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

相关阅读

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

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

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

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

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

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

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

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

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

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

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

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

相关万能钥匙-中间层

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

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

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

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

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

相关实战UML——给类图加点儿“三层料”

最近米老师在强调对比法学习，那我就来个创新的。内部联系找完了，就去跟之前的知识相联系，我在想，那可不可以创新一下呢？时而展望一下未来好不好？一切的想法都是

阳光穿透心脏的1/2处/ 2022年08月11日 03:23/ 0 赞/ 86 阅读

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

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

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

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

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

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

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

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

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