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

罗分明网络博客 Web前端 4260
首次发布：2020-06-10

效果图

以下是核心代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <script src="https://www.luofenming.com/js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <p>原创来自 www.luofenming.com</p>
    <input id="btn1" type="button" value="test" />
  
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                //创建弹出窗口
                addDiv();
                //这个地方可以做一些查询状态或等待其它任务执行完成后再执行关闭窗口
               //在这里为了演示效果，3秒后自动关闭
               setTimeout(deleteDiv, 3000);
            });
        });
        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;user-select:none;">正在运行，请等待...</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>

原创来自 http://www.luofenming.com/show.aspx?id=ART2020061000001