This demo allows you to see some of the features provided by the ASPxPopupControl in action. Use the options listed on the right to change various layout and behavior property settings of the ASPxPopupControl, and click Apply to assign them to it. To invoke the ASPxPopupControl, click the PopupElement button displayed on the left.
All of the options available in this demo are described below.
ShowCloseButton. This option specifies if a button allowing end-users to close a popup window is displayed within a window header.
ShowShadow. This option enables a shadow effect for a popup window.
ShowHeader and ShowFooter. Use these options to toggle the visibility of a popup window's header and footer.
PopupHorizontalAlign. This option specifies the horizontal alignment of a popup window, relative to the corresponding web control/HTML element. Option values include the following.
- NotSet. A popup window is displayed on the x-coordinate of the mouse cursor position.
- OutsideLeft. A popup window is displayed to the left of the corresponding HTML element, so that the x-coordinate of the window's right border equals the x-coordinate of the element's left border.
- LeftSides. A popup window is displayed so that the x-coordinate of the window’s left border equals the x-coordinate of the corresponding HTML element's left border.
- Center. A popup window is displayed so that it and its corresponding element are centered horizontally.
- RightSides. A popup window is displayed so that the x-coordinate of the window’s right border equals the x-coordinate of the corresponding HTML element's right border.
- OutsideRight. A popup window is displayed to the right of the corresponding HTML element so that the x-coordinate of the window's left border equals the x-coordinate of the element's right border.
- WindowCenter. A popup window is displayed so that it is horizontally aligned with the center of the browser.
PopupVerticalAlign. This option specifies the vertical alignment of a popup window with respect to the corresponding web control/HTML element. Choose one of the following option values.
- NotSet. A popup window is displayed on the y-coordinate of the mouse cursor position.
- Above. A popup window is displayed above the corresponding HTML element, so that the y-coordinate of the window's bottom border equals the y-coordinate of the element's top border.
- TopSides. A popup window is displayed so that the y-coordinate of the window’s top border equals the y-coordinate of the corresponding HTML element's top border.
- Middle. A popup window is displayed so that it and its corresponding element are centered vertically.
- BottomSides. A popup window is displayed so that the y-coordinate of the window’s bottom border equals the y-coordinate of the corresponding HTML element's bottom border.
- Below. A popup window is displayed below the corresponding HTML element so that the y-coordinate of the window's top border equals the y-coordinate of the element's bottom border.
- WindowCenter. A popup window is displayed so that it is vertically aligned in the center of the browser.
PopupHorizontalOffset and PopupVerticalOffset. Use these options to specify a popup window's horizontal and vertical offsets relative to the corresponding element in pixels. The options accept both positive and negative values.
Opacity. This option allows you to customize the level of transparency for a popup window and its controls. The option accepts values ranging from 0 (the window is transparent and completely invisible) to 100 (the window is opaque).
PopupAnimationType and CloseAnimationType. These properties specify the type of animation used to show and hide a popup window.
- Fade. A popup window is displayed/hidden using a fade-in/fade-out effect.
- Slide. A popup window is displayed/hidden using a slide effect.
AllowDragging. Enable this option to allow a popup window to be dragged within the bounds of the client browser's window.
DragElement. Choose which part of a popup window starts the drag operation: the header (a popup window can be dragged by its header) or the window (dragging can be initiated by clicking anywhere within a popup window's client area).
AllowResize. Enable this option to allow a popup window to be sized. Use the option in combination with the ResizingMode and ShowSizeGrip options. A popup window's size limits can be specified via the MinHeight, MinWidth, MaxHeight, and MaxWidth properties.
ResizingMode. This option controls whether a popup window is redrawn dynamically during the resizing operation (the Live value) or whether the window is redrawn after the resizing operation is finished (the Postponed value).
ShowSizeGrip. Use this option to toggle the visibility of a size grip element that, when dragged, allows end-users to size a popup window. The size grip can always be displayed (the True value), never be displayed (the False value), or displayed depending on the AllowResize property setting (the Auto value).
ScrollBars. This option specifies the visibility of scrollbars within a popup window. Choose one of the following option values.
- None. No scrollbars are displayed within the popup window.
- Horizontal. The popup window only displays the horizontal scrollbar.
- Vertical. The popup window only displays the vertical scrollbar.
- Both. The popup window displays both horizontal and vertical scrollbars.
- Auto. The popup window automatically displays a horizontal and/or vertical scrollbar if its content does not fit the popup window.
CloseAction. Use this option to specify the client action that closes a popup window. The option values include the following:
- None. The popup window can only be closed in code via a specific client script method.
- CloseButton. The popup window can only be closed by pressing the Close button displayed within the window's header.
- OuterMouseClick. The popup window is closed by clicking outside the window's region.
- MouseOut. The popup window is closed if the mouse pointer moves out of the window region. To specify the hide delay (in milliseconds), use the DisappearAfter option.
CloseOnEscape. This option specifies if a popup window is closed when an end-user presses the ESC key.
PopupAction. Use this option to specify the client action that invokes a popup window. Choose from one of the following option values:
- None. A popup window can be invoked only in code via a specific client script method.
- LeftMouseClick. A popup window can be invoked by clicking a corresponding web control or HTML element, specified by the PopupElementID property.
- RightMouseClick. A popup window can be invoked by right-clicking a corresponding web control or HTML element, specified by the PopupElementID property.
- MouseOver. A popup window is invoked when the mouse pointer enters a region occupied by a corresponding web control or HTML element, specified by the PopupElementID property. To specify the display delay (in milliseconds), use the AppearAfter option.