按钮控制div弹框居中显示和隐藏

前两天项目中需要一个“加载中的”弹框提示，返回数据后关闭该弹框，通过同事指导，写出来了，故记下来希望能帮助到以后的自己和各位，如有不对，敬请指正

第一步是创建一个div，可以添加图片，或者文字

<div id="loading" style="display:none;">
            <div class="content">
                <img alt="" src="img/loading.gif" style="width:100%;text-align: center;">
                <h2 style="text-align: center;margin-top:20px;">手续费获取中....</h2>
            </div>
        </div>
        <button id="controller">控制</button>

第二步修改css

#loading{
            position: fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color:rgba(0,0,0,.3);
            z-index: 9999;
        }
        #loading div{
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            border-radius:5px;
            background: #fff;
            position: absolute;
            width:300px;
            height:300px;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin: auto;
        }

 然后你可以用一个buttom来控制显示和隐藏

$(function(){
    $("#controller").click(function() {
           $("#loading").show();
            setTimeout(function(){
             $("#loading").hide();
        },2000)
    });
});                

此外附带一个加载中的动态图，已备不时之需。

转载于:https://www.cnblogs.com/ly-gaoshuaige/p/10825195.html