当前位置: 代码迷 >> 综合 >> 万能给任何页面加蒙层!!!
  详细解决方案

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

热度:24   发布时间:2024-01-20 03:28:40.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';}}

 

  相关解决方案