js实现的简单遮罩层

女爷i 2021-12-22 18:43 278阅读 0赞

超级简单的一个实现，可能会有局限性，贵在简单易懂，使用的时候执行前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);
    }

转载于:https://www.cnblogs.com/luludongxu/p/5909548.html

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 289 阅读

相关 uniapp实现一个遮罩层

.mark{ position:absolute; height: 500rpx; color:

亦凉/ 2022年10月19日 12:43/ 0 赞/ 627 阅读

相关 js点击遮罩层内容以外的地方隐藏遮罩

combatBoxc内容区域 combatBox整个遮罩层最外面的div > <div class="combatBox" style="display: bl

ゞ浴缸里的玫瑰/ 2022年10月14日 15:57/ 0 赞/ 242 阅读

相关 JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html [JS+CSS简单实现DIV遮罩层显示隐藏]

忘是亡心i/ 2022年07月16日 08:15/ 0 赞/ 255 阅读

相关遮罩层的实现及应用

遮罩层的实现： 1、实现思路：利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素 <!DOCTYPE html> <html>

水深无声/ 2022年06月16日 06:51/ 0 赞/ 238 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 267 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 297 阅读

相关 js实现的简单遮罩层

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

女爷i/ 2021年12月22日 18:43/ 0 赞/ 279 阅读

相关 css 遮罩层简单应用

html <input id="btnshow" type="button" value="Show" onclick="showdiv();"> <div

红太狼/ 2021年10月14日 06:32/ 0 赞/ 383 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 481 阅读