html加蒙版效果

body

    <div class="btn-group" style="float: right;padding-right: 20px">
        <form id="refresh" method="POST" action="/auto/api/update_job_status/" style="display:inline;">
            <button id="refresh_button" type="onclick" class="layui-btn btn ">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>更新状态
            </button>
            {% csrf_token %}
        </form>
    </div>
<div id="popWindow" class="popWindow" style="display: none;"><p class="load_ts">请稍等...</p></div>

style

<style type="text/css">
    .popWindow {
        background-color: #9D9D9D;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        filter: alpha(opacity=50);
        opacity: 0.5;
        z-index: 1;
        position: absolute;

    }

    .load_ts {
        color: #0C0C0C;
        display: block;
        position: fixed;
        text-align: center;
        bottom: 46%;
        font-size: 20px;
        font-family: 微软雅黑;
        width: 100%;
    }
</style>

js

$(function () {
        updateStatus();
 });
    //查询状态并更新
    function updateStatus() {
        $("#refresh_button").click(function () {
            $("#popWindow").css("display", "inherit");
        });
    }

显示效果：

image.png
image.png