BalloonPopupExtender Control
The BalloonPopupExtender control provides support for vertical tabs, and support for keyboard tab navigation. The BalloonPopup extender allows a page to display content to the user in a "Balloon" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
BalloonPopupExtender control properties
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Label ID="lblHelp" runat="server" Text="Help"></asp:Label>
<br />
<asp:Label ID="lblHelp2" runat="server" Text="Help 2"></asp:Label>
<asp:Panel ID="Panel1" runat="server">
<b>I am simple help content with BallonPopup</b>
<br />
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
</asp:Panel>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="lblHelp" BalloonPopupControlID="Panel1" BalloonSize="Large"
UseShadow="true" runat="server" BalloonStyle ="Rectangle">
</asp:BalloonPopupExtender>
<asp:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="lblHelp2" BalloonPopupControlID="Panel1" BalloonSize="Medium"
UseShadow="true" runat="server" BalloonStyle ="Cloud">
</asp:BalloonPopupExtender>
</div>
</form>
</body>
</html>
The BalloonPopupExtender control provides support for vertical tabs, and support for keyboard tab navigation. The BalloonPopup extender allows a page to display content to the user in a "Balloon" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
BalloonPopupExtender control properties
- TargetControlID : The ID of the control to which this extender is attache
- BalloonPopupControlID : The ID of the control in which the content will be displayed, which is a Panel control
- BalloonSize : It has three possible values: Large, Medium and Small
- BalloonStyle : It has two possible values: Rectangle, Cloud and Custom
- UseShadow : Whether we want to drop shadows with the BalloonPopup
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Label ID="lblHelp" runat="server" Text="Help"></asp:Label>
<br />
<asp:Label ID="lblHelp2" runat="server" Text="Help 2"></asp:Label>
<asp:Panel ID="Panel1" runat="server">
<b>I am simple help content with BallonPopup</b>
<br />
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
<b>I am simple help content with BallonPopup</b>
</asp:Panel>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="lblHelp" BalloonPopupControlID="Panel1" BalloonSize="Large"
UseShadow="true" runat="server" BalloonStyle ="Rectangle">
</asp:BalloonPopupExtender>
<asp:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="lblHelp2" BalloonPopupControlID="Panel1" BalloonSize="Medium"
UseShadow="true" runat="server" BalloonStyle ="Cloud">
</asp:BalloonPopupExtender>
</div>
</form>
</body>
</html>
