asp.net ajaxcontrolkit balloon popup extender bg цвет

Question

Как изменить цвет bg расширителя баллона 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> 

Я хочу изменить белую часть Б.Г. цвет шара:

Как сделать это?

Answer 1

его на самом деле не в фоне background color, он имеет спрайт изображение в фоновом режиме, чтобы изменить фоновое изображение воздушного шара, использовать стиль ниже

.ajax__balloon_popup .oval { 

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

} 

you can find the detail post here

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

a dd к вашему 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; 
}