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

这会阻止任何背后的内容......

将div与页面中心对齐，重叠asp.net中的表标记

1 个答案: