zoukankan      html  css  js  c++  java
  • js实现的简单遮罩层

    超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded

    /*
     * 显示loading遮罩层
     */
    function loading() {
        var mask_bg = document.createElement("div");
        mask_bg.id = "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);
    
        var mask_msg = document.createElement("div");
        mask_msg.style.position = "absolute";
        mask_msg.style.top = "35%";
        mask_msg.style.left = "42%";
        mask_msg.style.backgroundColor = "white";
        mask_msg.style.border = "#336699 1px solid";
        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);
    }
    /*
     * 关闭遮罩层
     */
    function loaded() {
        var mask_bg = document.getElementById("mask_bg");
        if (mask_bg != null)
            mask_bg.parentNode.removeChild(mask_bg);
    }
    

      

  • 相关阅读:
    工作流调度器Azkaban的安装配置
    MySQL初学入门基础知识-sql语句
    spark大数据生态架构
    快速排序算法——分析及总结 (非常好)
    经典的大数据面试题总结
    flume采集数据报错问题解决
    haproxy官方文档
    问题
    2016/6/7学习记录
    2016
  • 原文地址:https://www.cnblogs.com/luludongxu/p/5909548.html
Copyright © 2011-2022 走看看