0

我有一个使用 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 */
}

但是我怎么能在屏幕中央有一个盒子呢？

4

2 回答 2

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;
}
于 2013-06-28T00:46:18.043 回答
0

您需要使用 position:absolute 和负边距。

position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;

请在这里查看我的代码

于 2013-06-28T00:51:49.150 回答