页面弹出canvas的实现

一、功能实现

//CSS部分
 <style type="text/css">
        .popWindow {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1;
            position: absolute;

        }
        .maskLayer {
            width: 0.5rem;
            height: 0.5rem;
            left: 3%;
            top: 2%;
            color:#fff;
            z-index: 2;
            position: absolute;
        }
        .cavans {
            height: 100%;
            width: 100%;
        }

    </style>

//HTML部分
    <div id="popWindow" class="popWindow" style="display: none;">
        ![](../src/static/img/cavans.png)
    </div>
    <div id="maskLayer" class="maskLayer" style="display: none;" onclick="this.closeDiv()"></div>

//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的实现

推荐阅读更多精彩内容