纯原生JS写蒙版提示框，适配PC端和移动端

调用下面函数即可：

mask () {

  if (document.getElementById("maskDiv")) {

    document.getElementById("maskDiv").style.display = 'block';
  } else {
    //蒙版
    var mask = document.createElement('div');
    mask.id = 'maskDiv';
    mask.style.width = window.innerWidth + 'px';
    mask.style.height = window.innerHeight + 'px';
    mask.style.background = 'rgba(0,0,0,0.3)'
    mask.style.position = 'fixed';
    mask.style.display = 'block';
    mask.style.left = 0 + 'px';
    mask.style.top = 0 + 'px';
    mask.style.zIndex = '999';
    document.body.appendChild(mask);

    //弹框部分
    document.getElementById("maskDiv").innerHTML = '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'
    mask.style.fontSize = '100px'
    mask.innerHTML =
      `<div style="width:21rem;height:8.5rem;background:#fff;box-shadow:-0.1rem -0.1rem 1rem #ccc;border-radius: 0.45rem;text-align:center;position :absolute;top:0;bottom:0;left:0;right:0;margin:auto;font-size:1rem;">
        <p style="height:1.5rem;line-height:1.5rem;margin-top:0.8rem;font-weight:bolder;">提示</p>
        <div style="height:1.5rem;margin-top:0.25rem;"><p style="margin-top:1rem;padding:0 0.3rem">啦啦啦啦、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦。啦啦啦啦，啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦。</p>
        </div>
      </div>`

    //窗口变化
    window.onresize = function () {
      mask.style.width = window.innerWidth + 'px';
      mask.style.height = window.innerHeight + 'px';
    }
  }
}

效果如图：


功能基本实现，部分代码有待优化，后面会改动。