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

时间:2012-02-11 06:55:39

标签: css ajax updateprogress

这让我很精神!!!

好的,我有以下场景 - 用于在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正确浮动?

2 个答案:

答案 0 :(得分:0)

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

尝试一下:

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

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

#someElement .updateProgress {}

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

答案 1 :(得分: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