asp.net ajaxcontrolkit balloon popup extender bg color
-
16-06-2021 - |
题
How to change the bg color of an ajaxcontroltoolkit balloon extender?
I have a panel inside it but I can only set the panel bg color which looks weird.
Code:
<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>
I want to change the white part bg color of the balloon:
How to do that?
解决方案
its actually not a background color
in background, it has a sprite image in background, to change the background image of the balloon, use the style below
.ajax__balloon_popup .oval {
background-image: url('/image-path');
}
其他提示
You can get a nice custom popup using the following markup and css and change the background color and other styles as you want:
<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>
add to your 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;
}
不隶属于 StackOverflow