Home / AJAX

HOW TO Use the Popup Control

RSS
Modified on 2009/12/24 02:50 by Chris Muench Categorized as Uncategorized

PopUp Demonstration

target

PopUp Description

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.

Video - How Do I: Use the ASP.NET AJAX PopUp Control?

PopUp Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> <style type="text/css"> #popup { width: 200px; height: 200px; background-color: Gray; border: dashed 2px red; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; var popup; Sys.require(Sys.components.popup, function() { popup = Sys.create.popup("#popup", { parentElementID: "target", onShow: '{AnimationName: "Sequence", AnimationChildren: [{AnimationName:"HideAction", visible: true},{AnimationName:"FadeIn"}]}' }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="popup"> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> </div> <span id="target" style="position:absolute;left:100px;top:100px;">target</span> <input type="button" onclick="popup.show()" value="show popup"/> <input type="button" onclick="popup.hide()" value="hide popup"/> </div> </form> </body> </html>

PopUp Client Properties

PopUp Server Code Sample

        <asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
            <asp:UpdatePanel runat="server" ID="up1">
                <ContentTemplate>
                   <center>
                        <asp:Calendar ID="Calendar1" runat="server" Width="160px" DayNameFormat="Shortest"
                            BackColor="White" BorderColor="#999999" CellPadding="1" Font-Names="Verdana"
                            Font-Size="8pt" ForeColor="Black" OnSelectionChanged="Calendar1_SelectionChanged">
                                <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                                <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                                <SelectorStyle BackColor="#CCCCCC" />
                                <WeekendDayStyle BackColor="#FFFFCC" />
                                <OtherMonthDayStyle ForeColor="#808080" />
                                <NextPrevStyle VerticalAlign="Bottom" />
                                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                                <TitleStyle BackColor="#999999" Font-Size="7pt" BorderColor="Black" Font-Bold="True" />
                        </asp:Calendar>
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
            TargetControlID="DateTextBox"
            PopupControlID="Panel1"
            Position="Bottom" />
        
        Reminder message:
        <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />
        <asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
            <div style="border: 1px outset white; width: 100px">
                <asp:UpdatePanel runat="server" ID="up2">
                    <ContentTemplate>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="Walk dog" />
                                <asp:ListItem Text="Feed dog" />
                                <asp:ListItem Text="Feed cat" />
                                <asp:ListItem Text="Feed fish" />
                                <asp:ListItem Text="Cancel" Value="" />
                        </asp:RadioButtonList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </asp:Panel>
        <ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"
            TargetControlID="MessageTextBox"
            PopupControlID="Panel2"
            CommitProperty="value"
            Position="Bottom"
            CommitScript="e.value += ' - do not forget!';" />


PopUp Server Properties

The properties in italics are optional.

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
    TargetControlID="DateTextBox"
    PopupControlID="Panel1"
    Position="Bottom" />
  • TargetControlID - The ID of the control to attach to
  • PopupControlID - The ID of the control to display
  • Position - Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)
  • CommitProperty - Optional setting specifying the property on the control being extended that should be set with the result of the popup
  • CommitScript - Optional setting specifying additional script to run after setting the result of the popup
  • OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position.
  • Animations - Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.
    • OnShow - The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use to display the popup along with any other visual effects.
    • OnHide - The OnHide animation will be played each time the popup is hidden.

PopUp Additional Code Samples