zoukankan      html  css  js  c++  java
  • 按钮控制div弹框居中显示和隐藏

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

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

    <div id="loading" style="display:none;">
                <div class="content">
                    <img alt="" src="img/loading.gif" style="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)
        });
    });                

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

  • 相关阅读:
    Java学习十一天
    Java学习第十天
    Java学习第九天
    Java学习第八天
    Java学习第七天
    Java学习第六天
    Java学习第五天
    Java学习第四天
    Java第三天
    京峰教育-笔记
  • 原文地址:https://www.cnblogs.com/ly-gaoshuaige/p/10825195.html
Copyright © 2011-2022 走看看