页面弹出canvas的实现

一、功能实现

//CSS部分
 
//HTML部分
    
    
//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);

你可能感兴趣的:(页面弹出canvas的实现)