Question

这让我很精神!!!

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

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

当AJAX启动时，用Javascript来解决这个问题：

 <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正确浮动？

Answer 1

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

尝试一下：

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

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

#someElement .updateProgress {}

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

Answer 2

好吧，我放弃了样式表并运行：

  <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

Updateprogress面板，CSS和内联样式的删除

2 个答案: