Почему ModalPopupExtender не работает, когда я перемещаю стиль целевой панели с жестко заданного на CSS?

У меня есть ModalPopupExtender, настроенный на странице и отлично работающий. Он привязан к панели с некоторыми атрибутами стиля, жестко запрограммированными в его теге. Я пытаюсь перенести все свои стили из разметки в CSS, но когда я перемещаю эти стили в класс, всплывающее окно не работает. Что происходит?

Стили в CSS:

.class1
{
    border: solid 1px black;
    display: none;
    width: 700px;
    height: 400px;
    background-color: gray;
    overflow: scroll;
}
.class2
{
    background-color: White;
    height: 90%;
    width: 95%;
}
.backgroundClass
{
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

Панель:

<asp:Panel ID="pnlModalContainer" runat="server"  CssClass="class1">
    <asp:Panel ID="pnlModalHandle" runat="server">
        <table cellpadding="0" cellspacing="0" border="0" width="650px">
            <tr>
                <td>
                    Content Here&nbsp;|&nbsp;
                    <asp:Label ID="lblTitle" runat="server" Text=""></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <div style="padding-left: 25px;">
        <table cellpadding="1" cellspacing="0" border="0" class="class2">
            <tr valign="top">
                <td>
                    <asp:UpdatePanel ID="udpPopups" runat="server">
                        <ContentTemplate>
                            ...content here...
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr valign="bottom">
                <td align="right" style="padding-bottom: 5px; padding-right: 5px;">
                    <asp:Button ID="btnModalOk" runat="server" Text="Ok" />&nbsp;&nbsp;
                    <asp:Button ID="btnModalCancel" runat="server" Text="Cancel" CausesValidation="false" />
                </td>
            </tr>
        </table>
    </div>
</asp:Panel>

И ПДВ:

<cc1:ModalPopupExtender ID="mpeAction" runat="server" PopupControlID="pnlModalContainer"
TargetControlID="fakeButton" BackgroundCssClass="backgroundClass" DropShadow="false"
PopupDragHandleControlID="pnlModalHandle" RepositionMode="RepositionOnWindowResizeAndScroll" />

Это в ASP.NET 2.0. Настроен таким образом, я вижу, что фон появляется, но всплывающее окно не появляется. Но если я перенесу содержимое класса class1 в разметку как стиль, он отлично сработает. Всплывающее окно отображается с помощью Javascript, созданного из кода программной части VB, с использованием ScriptManager.RegisterStartupScript().

ОБНОВЛЕНИЕ: я видел это и на других элементах управления; Кажется, что элементы управления инструментария AJAX любят встроенные стили макета, а не в таблице стилей. Почему это?


person Tom Hamming    schedule 05.08.2010    source источник


Ответы (1)


Возможно, специфика стилей в таблице стилей ниже, чем специфичность встроенных стилей. Попробуйте добавить !important в конец каждого значения свойства. Как в:

.class1
{
    border: solid 1px black !important;
    display: none !important;
    width: 700px !important;
    height: 400px !important;
    background-color: gray !important;
    overflow: scroll !important;
}
...

Если это что-то меняет, вам нужен "более конкретный" селектор, чем ".class1".

См. раздел Специфика CSS.

person John Kurlak    schedule 19.09.2011