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

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

  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';
 }}