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;
}

Answer 2

您需要使用头寸：绝对和负边距。

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

请查看我的代码here

如何在屏幕中心显示消息框？

2 个答案: