JS 动态创建 dev 遮罩

青旅半醒 2023-06-29 02:13 10阅读 0赞

> # 创建遮罩 #

--------------------

> # 取消遮罩  #

--------------------

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

--------------------

> # 示例  #

<!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>