asp.net - 将 div 对齐到与 asp.net 中的表格标签重叠的页面中心

Question

我想在页面中央使用 DIV 显示一个表单。当显示表单时，背景页面应该被禁用。这是我的 CSS:

.formLayout {
    background-color: #f3f3f3;
    border: solid 1px #a1a1a1;
    padding: 10px;
    width: 300px;
    margin: 0 auto;       
}

.formLayout Label, .formLayout TextBox {
    display: block;
    width: 120px;
    float: left;
    margin-bottom: 10px;
}

.formLayout label {
    text-align: right;
    padding-right: 20px;
}

这是我的标记:

<div class="formLayout">
    <asp:Label ID="Label2" runat="server" Text="Enter the Load Code:"></asp:Label> 
    <asp:TextBox ID="inputLoadCode" runat="server"></asp:TextBox>
    <br />
    <br />
          &nbsp;  &nbsp;  &nbsp;  &nbsp;
          &nbsp;  &nbsp;  &nbsp;  &nbsp;
            &nbsp;  &nbsp;  &nbsp;  &nbsp;
          &nbsp;  &nbsp;  &nbsp;  &nbsp;
          &nbsp;  &nbsp;  &nbsp;  &nbsp;
    <asp:Button ID="Button1" runat="server" Text="Submit" />
    &nbsp;
    <asp:Button ID="Button2" runat="server" Text="Cancel" />
</div>
<table cellspacing="2" id="Components" width="100%">.........

Answer 1

你可以尝试这样的事情:

<div id="dv-modal">
        <div id="dv-bg"></div>
        <div id="dv-form"></div>
    </div>

还有CSS:

        #dv-modal
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index:1000;
        }

        #dv-bg
        {
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 100%;
        }

        #dv-form
        {
            position: relative;
            width: 100px;
            height: 100px;
            background: gray;

            /*CENTER ON THE SCREEN*/
            top: 50%;
            left: 50%;
            margin-left: -50x;
            margin-top: -50px;
        }

这将阻止后面的任何内容...