JQuery弹出和移除 Html 等待状态框 遮罩层效果 阻塞效果

在web设计中,有时等待后端数据要一段时间,这个时候又不想用户其它操作时,我们可以选择阻塞效果,让用户无法操作

转换请保留 http://www.luofenming.com/show.aspx?id=ART2020061000001

效果图

以下是核心代码

<!DOCTYPE html>
<html>
<head>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <p>原创来自 www.luofenming.com</p>
    <input id="btn1" type="button" value="test" />
    <input type="button" onclick="deleteDiv()" value="test" />

    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                //创建弹出窗口
                addDiv();
            });
        });
        function addDiv() {
            $('<div id="divCell" style="position:absolute;background-color:#fbfbfb;z-index:1;top:50%;width:300px;height:120px;left:50%;border:1px solid #fbfbfb;box-shadow:10px 10px 5px #888888;border-radius:5px;margin-top:-60px;margin-left:-150px;text-align:center;line-height:120px">正在运行,请等待...</div>').appendTo('body');
            $('<div id="lightbox" style="position:absolute;top:0;bottom:0;left:0;right:0;background-color:#000;opacity:.3;"></div>').appendTo('body');
        }
        function deleteDiv() {
            var my = document.getElementById("divCell");
            if (my != null)
                my.parentNode.removeChild(my);

            var lightbox = document.getElementById("lightbox");
            if (lightbox != null)
                lightbox.parentNode.removeChild(lightbox);
        }
    </script>
</body>
</html>


评论