Выровняйте div по центру страницы, перекрывая тег таблицы в asp.net

Question

Выровняйте div по центру страницы, перекрывая тег таблицы в asp.net

0

Я хочу, чтобы форма отображалась с помощью 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%">.........

user2124167 09 янв. 2014, в 12:43

Источник

0

Эта ссылка может вам помочь: stackoverflow.com/questions/21011406/…
Tom Hagen 09 янв. 2014, в 11:46

Теги:

html

css

asp.net

1 ответ

Ещё вопросы

Эта ссылка может вам помочь: stackoverflow.com/questions/21011406/…

LcSalazar · Accepted Answer · 2014-01-09T10-12-00.000Z

Вы можете попробовать что-то вроде этого:

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

Это заблокирует любой контент позади...

Что будет делать dv-модальный класс?
Это просто оболочка, чтобы держать форму и фон в фиксированном положении. И вдобавок ко всему.