调用下面函数即可:
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';
}
}
}
效果如图:
功能基本实现,部分代码有待优化,后面会改动。