ts，js写法,css增加遮罩方法，全局遮罩

最新推荐文章于 2023-02-26 09:51:54 发布

1964347597

最新推荐文章于 2023-02-26 09:51:54 发布

阅读量310

点赞数

文章标签： css vue.js html5 stylus

本文链接：https://blog.csdn.net/qq_28813031/article/details/119603676

版权

JavaScript DOM操作遮罩层全局提示页面交互

关键词由CSDN通过智能技术生成

/**
 * 全局遮罩,传值true和false
 * 启用遮罩shadeShowOrHide(true)
 * 关闭遮罩shadeShowOrHide(false)
 * */
export function shadeShowOrHide(flag) {
  // flag为true增加遮罩,flag为false去掉遮罩
  if(flag){
    let mask_bg = document.createElement("div");
    mask_bg.id = "mask_bg";
    mask_bg.className = "mask_bg";
    mask_bg.style.position = "absolute";
    mask_bg.style.top = "0px";
    mask_bg.style.left = "0px";
    mask_bg.style.width = "100%";
    mask_bg.style.height = "100%";
    mask_bg.style.backgroundColor = "#777";
    mask_bg.style.opacity = '0.6';
    mask_bg.style.zIndex = '10001';
    document.body.appendChild(mask_bg);

    let mask_msg = document.createElement("div");
    mask_msg.style.position = "absolute";
    mask_msg.style.top = "35%";
    mask_msg.style.left = "42%";
    mask_msg.style.backgroundColor = "#777";
    mask_msg.style.textAlign = "center";
    mask_msg.style.fontSize = "1.1em";
    mask_msg.style.fontWeight = "bold";
    mask_msg.style.padding = "0.5em 3em 0.5em 3em";
    mask_msg.style.zIndex = '10002';
    mask_msg.innerText = "正在执行,请稍后...";
    mask_bg.appendChild(mask_msg);
  }else {
    let mask_bg:any = document.getElementById("mask_bg");
    if(mask_bg!=undefined && mask_bg!=null){
      mask_bg.parentNode.removeChild(mask_bg);
    }
  }
}