html - 如何在屏幕中央显示消息框？

Question

我有一个使用 ajax 的 asp.net 解决方案。使用更新进度面板的功能之一是只有在后台进行 ajax 请求时才会显示内容。

所以我想基本上显示一个黑色透明背景，阻止用户做任何事情，并在屏幕中央显示一个框，上面写着请稍候，并有一个加载 gif。

我能够使用这个获得黑色背景:

                    <asp:UpdateProgress ID="AjaxAnimation" runat="server">
                        <ProgressTemplate>
                            <center>
                                <%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%>
                                <div class="dim"></div>
                            </center>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

CSS

.dim 
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:100 !important;
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

但是我怎样才能在屏幕中央有一个框呢？

Answer 1

如下内容？

<div class="dim" runat="server">
    <span class="msg">Please wait...</span>
</div>

.dim
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:100 !important;
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

.dim .msg {
    display:inline-block;
    position: absolute;
    width: 200px
    height: 100px;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    margin: auto;
}