1

这让我精神崩溃！！！

好的，我有以下场景 - ModalPopupExtender 用于在 AJAX 运行时显示 UpdateProgress 面板。所以我有以下内容：

<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
            <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
                <ProgressTemplate>
                    <div style="position: relative; top: 40%; text-align: center;">
                        <asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
                            padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
                        <asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
                            margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
                 </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server"  TargetControlID="panelUpdateProgress"
        BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
    </ajaxToolkit:ModalPopupExtender>

Javascript 在 AJAX 启动时触发这个东西：

 <script type="text/javascript" language="javascript">
    var ModalProgress = '<%= ModalProgress.ClientID %>';
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
    function beginReq(sender, args) {
        // shows the Popup 
        $find(ModalProgress).show();
    }

    function endReq(sender, args) {
        //  Hides the Popup
        $find(ModalProgress).hide();
    } 
</script>

随着样式：

<style type="text/css">
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=50);
        opacity: 0.50;
    }

    .updateProgress
    {
        float: right;
        border-width: 1px;
        border-style: solid;
        background-color: #FAFAD2;
        width: 250px;
        height: 100px;
    }
</style>

但是，我终生无法让 updateProgress 向右浮动或调整位置（仅作为示例）。

使用开发人员工具，我可以看到某种内联样式覆盖了 CSS 样式。

例如，我如何才能让我的 updateprogress 浮动正确？

4

2 回答 2

0

!important如果您正在与您无法控制的内联样式作斗争，那么这是实际上合理使用的极少数情况之一：

试试这个：

.updateProgress
{
    float: right !important;
    /* etc. */
}

如果这不起作用，请尝试添加clear:right，或使用更具体的选择器，例如：

#someElement .updateProgress {}

编辑：CSS 选择器的特殊性无助于内联样式，因此请忽略它作为可能的解决方案。

于 2012-02-11T07:29:35.233 回答
0

好吧，我已经放弃了样式表并使用以下代码运行：

  <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
            <ProgressTemplate>
                <div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
                    width: 250px; height: 100px;">
                    <div style="position: relative; top: 40%; text-align: center;">
                        <asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
                            padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
                        <asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
                            margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

它做生意，所以我现在很高兴：D

于 2012-02-11T08:37:15.447 回答