This demo allows you to see some of the features provided by the ASPxPopupControl in action. Use 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.
Below, all of the options available in this demo are described:
- 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:
- 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 left border x-coordinates of the window and its corresponding element are equal.
- Center. A popup window is displayed, so that it and its corresponding element are horizontally centered.
- RightSides. A popup window is displayed, so that the right border x-coordinates of the window and its corresponding element are equal.
- 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's window.
- 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 top border y-coordinates of the window and its corresponding element are equal to one another.
- Middle. A popup window is displayed, so that it and its corresponding element are vertically centered.
- BottomSides. A popup window is displayed, so that the bottom border y-coordinates of the window and its corresponding element are equal.
- 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 with the center of the browser's window.
- 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 a level of transparency for a popup window and its controls. The option accepts values ranging from 0 (the window is transparent and so it's completely invisible) to 100 (the window is opaque).
- EnableAnimation. Use this option to enable a predefined popup animation effect.
- PopupAnimationType. This property specifies the type of animation used to show a popup window.
- Fade. A popup window is displayed using a fade-in effect.
- Slide. A popup window is displayed 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: header (a popup window can be dragged by its header) or window (dragging can be started 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 be displayed always (the True value), never (the False value) or dependent upon 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 a popup window.
- Horizontal. A popup window displays only the horizontal scrollbar.
- Vertical. A popup window displays only the vertical scrollbar.
- Both. A popup window displays both the horizontal and vertical scrollbars.
- Auto. A popup window automatically displays a horizontal or/and 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. Option values include:
- None. A popup window can be closed only in code via a specific client script method.
- CloseButton. A popup window can only be closed by pressing the Close button displayed within the window's header.
- OuterMouseClick. A popup window is closed by a click outside the window's region.
- MouseOut. A popup window is closed if the mouse pointer moves out of the window's region. To specify the hide delay (in milliseconds), use the DisappearAfter option.
- PopupAction. Use this option to specify the client action that invokes a popup window. Choose 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 left-clicking a corresponding web control or HTML element, specified via the PopupElementID property.
- RightMouseClick. A popup window can be invoked by right-clicking a corresponding web control or HTML element, specified via the PopupElementID property.
- MouseOver. A popup window is invoked when the mouse pointer enters the region occupied by a corresponding web control or HTML element, specified via the PopupElementID property. To specify the display delay (in milliseconds), use the AppearAfter option.