JS 动态创建 dev 遮罩

最新推荐文章于 2023-03-12 12:39:35 发布

码农农码一生

最新推荐文章于 2023-03-12 12:39:35 发布

阅读量441

点赞数

分类专栏：前端问题文章标签： js遮罩

本文链接：https://blog.csdn.net/chenhao_c_h/article/details/103913604

版权

前端问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

创建遮罩

	function __mask(msgText) {

		if (msgText == undefined) {
			msgText = "正在操作,请稍候……";
		}
		
		// 需要给想遮罩的 dev给个id，这里获取那个dev的大小宽度，根据这个大小宽度来创建合适的遮罩
		var maskTagert = document.getElementById("maskTarget");
		

		if(!maskTagert)
			return;

		var width = maskTagert.offsetWidth;
		var height = maskTagert.offsetHeight;
		// 判断有没有遮罩，没有就创建
		var wait = document.getElementById("empMask");
		if (!wait) {
			wait = document.createElement("DIV");

			wait.style.top = height / 2;
			wait.style.left = width / 2;

			wait.style.width = "100%";
			wait.style.height = height;
			wait.style.display = "block";
			wait.id = "empMask";

			var msg = document.createElement("DIV");
			msg.id = "maskMsg";
			msg.style.height  = "100%";
			msg.style.width  = "100%";
			msg.style.background = "#e4e4e4";
			msg.style.position = "absolute";
			msg.style.top = 0;
			msg.style.left = 0;
			msg.style.filter = "alpha(opacity=50)"

			msg.className = "ext-el-mask-msg";
			msg.innerHTML = "<div style='color:blue;position:relative;top:"+height/2+"px;left:"+width/2+"px;'><img src='images/wait.gif' style='vertical-align:middle;filter:alpha(opacity=100);'>"
					+ msgText + "</div>";


			wait.className = "ext-el-mask";

			document.body.appendChild(msg);
			document.body.appendChild(wait);

		} else {
			wait.style.display = "block";
		}

	}

取消遮罩

   function __unmask() {
	    var list = ["maskMsg","empMask"];
	    list.forEach(function(v) {
			var mask = document.getElementById(v)	;
			if (mask != undefined) {
				mask.style.display = "none";
			}
		});
	}

给需要上遮罩的标签加一个id

<body class="page_comtent" onload="doOnLoad()" id="maskTaget">
.....
</body>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mask</title>

    <style>
        .container {
            border: 1px solid #d0d0d0;
            margin: 100px 50px 0 50px;
            padding: 20px 30px 30px 30px;
        }
    </style>

</head>
<body>

<div class="container" id="container" style="position: relative">
    <h1>Simple Mask</h1>
    <button class="show-mask" data-mask-message="Loading...." data-mask-container="container">Show Mask</button>
</div>


<div class="container" id="container-timeout" style="position: relative">
    <h1>Mask with timeout</h1>
    <label for="in_timeout_val">Timeout</label>
    <input id="in_timeout_val" value="10"/>
    <button class="show-mask" data-mask-timeout="$in_timeout_val" data-mask-container="container-timeout">Show Mask
    </button>
</div>


<div class="container" id="container-message" style="position: relative">
    <h1>Mask with custom message</h1>
    <label for="in_message_val">Message</label>
    <input id="in_message_val" name="message_val" value="加载中"/>
    <br/>
    <label for="in_timeout_message_val">Timeout</label>
    <input id="in_timeout_message_val" value="10"/>
    <button class="show-mask" data-mask-message="$in_message_val" data-mask-timeout="$in_timeout_message_val"
            data-mask-container="container-message">Show Mask
    </button>
</div>


<script>

    const buttons = document.getElementsByClassName("show-mask");

    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", showMask)
    }


    function showMask(event) {
        const btn = event.target;
        const message = btn.getAttribute("data-mask-message");
        const container = btn.getAttribute("data-mask-container");
        const timeout = btn.getAttribute("data-mask-timeout");
        mask(message, container, timeout)
    }

    function mask(message, parent, timeout) {
        if (message === null || message === undefined) {
            message = "loading..."
        }

        if (message.startsWith("$")) {
            const id = message.replace("$", "");
            const el = document.getElementById(id);
            message = el.value;
        }


        if (parent === null || parent === undefined) {
            parent = document.body
        } else {
            parent = document.getElementById(parent)
        }

        const div = document.createElement("div");


        let parentWidth = parent.offsetWidth;
        let parentHeight = parent.offsetHeight;

        div.style.width = parentWidth + "px";
        div.style.height = parentHeight + "px";
        div.style.background = "#e4e4e4";
        div.style.opacity = "0.7";

        div.style.position = "absolute";

        if (parent.style.position === "") {
            parent.style.position = "relative";
        }

        if (parent.style.position === "relative") {
            div.style.top = "0px";
            div.style.left = "0px";
        } else if (parent.style.position === "absolute") {
            div.style.top = "0px";
            div.style.left = "0px";
        }

        const span = document.createElement("div");
        span.innerText = message;
        span.style.height = div.style.height;
        span.style.width = div.style.width;
        span.style.display = "table-cell";
        span.style.textAlign = "center";
        span.style.verticalAlign = "middle";

        if (timeout !== null && timeout !== undefined) {

            var timeoutVal = 0;

            if (!isNaN(timeout)) {
                timeoutVal = parseInt(timeout);
            }

            if (typeof timeout == "string" || timeout instanceof String) {
                if (timeout.startsWith("$")) {
                    const id = timeout.replace("$", "");
                    const el = document.getElementById(id);
                    timeoutVal = parseInt(el.value);
                }
            }

            if (timeoutVal > 0) {

                var timeLeft = timeoutVal;
                span.innerText = message + "[" + timeLeft + "s]";
                const interval = setInterval(function () {
                    span.innerText = message + "[" + --timeLeft + "s]";
                }, 1000);

                setTimeout((function () {
                    parent.removeChild(div);
                    clearInterval(interval);
                }), timeoutVal * 1000)
            }

        }

        div.appendChild(span);
        parent.appendChild(div);

    }


</script>


</body>
</html>

码农农码一生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 动态创建 dev 遮罩

创建遮罩 function __mask(msgText) { if (msgText == undefined) { msgText = "正在操作,请稍候……"; } // 需要给想遮罩的 dev给个id，这里获取那个dev的大小宽度，根据这个大小宽度来创建合适的遮罩 var maskTagert = document.getElementById("m...
复制链接

扫一扫