[英]asp.net ajaxcontrolkit balloon popup extender bg color
如何更改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顏色:
怎么做?
它實際上不是background color
,它在背景中有一個精靈圖像,要更改氣球的背景圖像,請使用以下樣式
.ajax__balloon_popup .oval {
background-image: url('/image-path');
}
您可以使用以下標記和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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.