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

红太狼 2022-12-21 13:58 123阅读 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';
     }}