asp.net ajaxcontrolkit 气球弹出扩展器 bg 颜色答案

【问题标题】：asp.net ajaxcontrolkit balloon popup extender bg colorasp.net ajaxcontrolkit 气球弹出扩展器 bg 颜色
【发布时间】：2012-06-21 10:03:43
【问题描述】：

如何改变ajaxcontroltoolkit气球扩展器的bg颜色？

我里面有一个面板，但我只能设置看起来很奇怪的面板背景颜色。

代码：

<asp:Panel ID="Panel1" runat="server" style="background-color:Red">
        Type some data in here    
    </asp:Panel>


<ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server"
        TargetControlID="lblBalloon"
        BalloonPopupControlID="Panel1"
        Position="BottomRight" 
        BalloonStyle="Rectangle"
        BalloonSize="Small"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="false"
        DisplayOnClick="False" />
</asp:Content>

我想改变气球的白色部分bg颜色：

怎么做？

【问题讨论】：

标签： c# asp.net ajaxcontroltoolkit balloon

【解决方案1】：

其实它不是background color在背景中，它在背景中有一个精灵图像，要改变气球的背景图像，使用下面的样式

.ajax__balloon_popup .oval {

    background-image: url('/image-path');

}

you can find the detail post here

【讨论】：

好的，但是将 BalloonStyle、CustomClassName、CustomCssUrl 设置为什么？
已经尝试过 CustomClassName="oval" CustomCssUrl="styles/Site.css" BalloonStyle="Custom" 当我将鼠标悬停时没有任何反应。 .ajax__balloon_popup .oval { 背景图像： url('images/bg.png'); }
如果您仅用于此目的，请删除 CustomClassName="oval" CustomCssUrl="styles/Site.css" BalloonStyle="Custom"
如果我删除这三个它只是默认为矩形类型气球
嗨，伙计..你有白色背景矩形图像吗..请与我分享伙计..我也遇到了这个问题...

【解决方案2】：

您可以使用以下标记和 css 获得一个不错的自定义弹出窗口，并根据需要更改背景颜色和其他样式：

    <cc:BalloonPopupExtender 
        ID="bb1" runat="server" 
        BalloonStyle="Custom" 
        CustomClassName="custom-popup"  
        Position="BottomRight" 
        BalloonSize="Medium" 
        UseShadow="false" 
        CustomCssUrl="style.css" 
        DisplayOnMouseOver="true"  
        BalloonPopupControlId="infoPopup" 
        TargetControlID="lnkInfo1">
       <Animations>
            <OnShow>
                <Sequence>
                    <HideAction Visible="true" />
                    <FadeIn Duration=".5" Fps="20" />
                </Sequence>
            </OnShow>
            <OnHide>
              <FadeOut Duration=".5" Fps="20" />
            </OnHide>
        </Animations>
    </cc:BalloonPopupExtender>

添加到你的 style.css：

.custom-popup {
    background-color: #fdfff7;
    display: inline-block;
    width: 300px;
    height: 120px;
    text-align: center;
    vertical-align: top;
    font-size: 11px;
    border: solid 1px #cbbeac;
    border-radius: 12px;
}

【讨论】：