页面弹出canvas的实现

一、功能实现

//CSS部分
 

//HTML部分
    

        ![](../src/static/img/cavans.png)
    
    

//JS部分
function showDiv() {
          document.getElementById('popWindow').style.display = 'block';
          document.getElementById('maskLayer').style.display = 'block';
}
          
function closeDiv() {
     document.getElementById('popWindow').style.display = 'none';
     document.getElementById('maskLayer').style.display = 'none';
}

二、解决添加蒙层后页面滚动问题
1.功能实现后，我们发现由于页面过长导致其能够滚动，这会引起蒙层下方的正常页面也显示出来了。
我们将body设为overflow:hidden即可解决该问题。

document.getElementsByTagName("body")[0].setAttribute("style","overflow:hidden")

2.我们发现这样设置在移动端不起作用，所以我们为蒙层添加一个监听事件(addEventListener)，该事件通过preventDefault()来禁用touchmove，即禁用了页面滚动这一事件，这样我们在移动端拖动的蒙层时候就不会引起页面滚动了。由于该事件仅作用于蒙层上，当我们关闭蒙层的时候，页面又能正常滚动了。

document.getElementById('popWindow').addEventListener('touchmove',function (event) {
            event.preventDefault();
          } ,false);