点击比较费时的查询操作时，用一个遮罩层显示正在加载，加载完后暗藏该div

点击比较费时的查询操作时，用一个遮罩层显示正在加载，加载完后隐藏该div

已经有好一段时间没有使用.NET控件做web了，今天要优化一个界面，正好是用.NET控件做的，遂把此次解决问题的方案下来。

总是有许多开发人员觉得做东西没思路，我觉得只是见得少了，思考少了的缘故，所以我总是喜欢以写博客的方式记录下来平时工作中遇到的一些问题，并附上解决方案。

需求：界面查询操作比较费时，用一个遮罩层显示操作正在执行，当操作执行完之后，关闭遮罩层。

思路：

1、准备两个div，以嵌套的形式存在，下面的div作为遮罩层，上面的div作为显示用，可以放一个动态图片，再附上几个字——“加载中...”。div默认让其不显示，设置其css样式：display: none;

2、当点击查询时，修改div的css样式让其显示出来，当查询结束后，再把该div隐藏起来，就如此简单。

当然，还有一些细节需要注意，如遮罩层是遮罩整个界面还是只在某一区域实现遮罩效果，我这里是实现区域遮罩，如果要实现整个界面遮罩只要稍微修改下js就可以了。

效果图如下：

点击比较费时的查询操作时，用一个遮罩层显示正在加载，加载完后暗藏该div

Html代码如下：

    <div id="MyDiv" class="white_content"> <!--弹出层时背景层DIV-->  
        <div class="loading">
            <span style='width: 115px; height: 115px;'>
                <img src='Images/progress.gif' alt="数据正在加载..." /></span><span class='spnContent'>数据正在加载...</span>
        </div>
    </div>

Css代码如下：

/*------------------------加载div样式----------------------------------------*/
        .loading {
            z-index: 1001;
            vertical-align: middle;
            text-align:center;
            height:115px;
            line-height:115px;
        }
        .spnContent {
            vertical-align: 50%;
            margin-left: 10px;
            color: red;
            font-size: 18px;
            font-weight: bold;
        }
        .white_content {
            display: none;
            position: absolute;
            border: 3px solid lightblue;
            background-color: #CAE4F7;
            z-index: 9999;
            -moz-opacity: 0.5;
            opacity: .50;
            filter: alpha(opacity=50);
            vertical-align: middle;
            top:0px;
            text-align:center;
        }
        .navPoint {
            color: white;
            cursor:pointer;
            font-family: Webdings;
            font-size: 9pt;
        }
 /*-------------------------------------------------------------------------*/

js代码如下：

 /*-----------------------------加载div-----------------------------------*/
        var show_div = 'MyDiv'; //遮罩div的id
        //弹出隐藏层
        function ShowDiv() {
            var showdiv = document.getElementById(show_div);
            if (showdiv == undefined) {
                return;
            }
            showdiv.style.width = $(document).width()+"px";
            showdiv.style.top = $("#divList").offset().top + "px"; //divList是要指定的div的id，在该div上进行遮罩
            showdiv.style.left = $("#divList").offset().left + "px";
            //如果要遮罩整个页面：设置遮罩div的高：$(document).height() + "px" 宽：$(document).width()+"px";
            showdiv.style.height = $("#divList").height() + "px"; 
            showdiv.style.display = 'block';
        };
        //关闭弹出层
        function CloseDiv() {
            document.getElementById(show_div).style.display = 'none';
        };
 /*----------------------------------------------------------------*/
function validateInput() {
     ShowDiv();
     __doPostBack("btnSearch", "");
}

aspx页面关键代码：

    <asp:Button ID="btnSearch" runat="server" Text="查 询" CssClass="btn"  Font-Bold="True" Height="25px" Width="80px" UseSubmitBehavior="False"
 OnClick="btnSearch_Click" OnClientClick="return validateInput();" />

cs代码：

        protected void btnSearch_Click(object sender, EventArgs e)
        {   
           //省略掉耗时的查询操作代码         
          ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "HiddenDiv", "CloseDiv();", true); //关闭加载div
        }

代码很简单，也加了注释，这里我就不详细解释了。

点击比较费时的查询操作时，用一个遮罩层显示正在加载，加载完后暗藏该div

相关推荐