ModalPopup Extender (demo)

The ModalPopup extender allows you to display content in an element that mimics a modal dialog box, which prevents a user from interacting with the rest of pages. The modal content can contain any hierarchy of controls. It is displayed above background (in z-order) that can have a custom style applied to it. Clicking OK or Cancel in the modal popup dismisses the content and optionally runs a custom script. The custom script is typically used to apply changes that were made in the modal popup. If a postback is required, you can allow the OK or Cancel control to perform a postback. By default, the modal content is centered on the page. However, you can set absolute positiniong and set only X or Y to center the content vertically or horizontally.

Properties

Name Description
BackgroundCssClass A CSS class to apply to the background when the modal popup is displayed
CancelControlID ID of an element that cancels the modal popup
Drag A Boolean value that specifies whether or not the modal popup can be dragged Remarks: This property is obsolete
DropShadow Set to True to automatically add a drop shadow to the modal popup
OkControlID ID of an element that dismisses the modal popup
OnCancelScript A script to run when the modal popup is dismissed using the element specified in CancelControlID
OnHidden Animation to perform once the modal popup is hidden
OnHiding Animation to perform just before the modal popup is hidden. The popup closes only after animation completes
OnOkScript A script to run when the modal popup is dismissed using the element specified in OkControlID
OnShowing Animation to perform just before the modal popup is shown
OnShown Animation to perform once the modal popup is shown
PopupControlID ID of an element to display as a modal popup
PopupDragHandleControlID ID of the embedded element that contains a popup header and title that will be used as a drag handle
RepositionMode A value that determines if the popup must be repositioned when the window is resized or scrolled
X The X coordinate of the top/left corner of the modal popup Remarks: If this value is not specified, the popup will be centered horizontally
Y The Y coordinate of the top/left corner of the modal popup Remarks: If this value is not specified, the popup will be centered vertically

Client properties

backgroundCssClass
A CSS class to apply to the background when the modal popup is displayed
Getter name: get_backgroundCssClass()
Setter name: set_backgroundCssClass(value)

cancelControlID
ID of an element that cancels the modal popup
Getter name: get_cancelControlID()
Setter name: set_cancelControlID(value)

drag
A Boolean value that specifies whether or not the modal popup can be dragged
Getter name: get_drag()
Setter name: set_drag(value)

dropShadow
A Boolean value that specifies whether or not a drop shadow should be added to the modal popup
Getter name: get_dropShadow()
Setter name: set_dropShadow(value)

okControlID
ID of an element that dismisses the modal popup
Getter name: get_okControlID()
Setter name: set_okControlID(value)

onCancelScript
A script to run when the modal popup is dismissed by the element specified using the cancelControlID property
Getter name: get_onCancelScript()
Setter name: set_onCancelScript(value)

onHidden
A JSON definition of generic OnShowing Animation. Played before the Popup is hidden
Getter name: get_onHidden()
Setter name: set_onHidden(value)

onHiding
A JSON definition of generic OnShowing Animation. Played before the Popup is being hidden
Getter name: get_onHiding()
Setter name: set_onHiding(value)

onOkScript
A script to run when the modal popup is dismissed by the element specified using the okControlID property
Getter name: get_onOkScript()
Setter name: set_onOkScript(value)

onShowing
A JSON definition of generic OnShowing Animation. Played before the Popup is being shown
Getter name: get_onShowing()
Setter name: set_onShowing(value)

onShown
A JSON definition of generic OnShowing Animation. Played before the Popup is shown
Getter name: get_onShown()
Setter name: set_onShown(value)

popupControlID
ID of an element to display as a modal popup
Getter name: get_popupControlID()
Setter name: set_popupControlID(value)

popupDragHandleControlID
ID of an element to display as a drag handle for the modal popup
Getter name: get_popupDragHandleControlID()
Setter name: set_popupDragHandleControlID(value)

repositionMode
The Sys.Extended.UI.ModalPopupRepositionMode object that determines whether the modal popup should be repositioned on window resize or scroll
Getter name: get_repositionMode()
Setter name: set_repositionMode(value)

x
The distance from the left side of the modal popup to the left border of the browser window in pixels
Getter name: get_x()
Setter name: set_x(value)

y
The distance from the top side of the modal popup to the top border of the browser window in pixels
Getter name: get_y()
Setter name: set_y(value)

Client methods

disableTab()
Changes tab indices so that tabbing moves focus only through the modal dialog box

hide()
Hides an element that is referenced by the PopupControlID property

restoreTab()
Restores tab indices from the page

show()
Displays an element that is referenced by the PopupControlID property as a modal dialog box

Client events

hidden
Fires when the popup is hidden
Add event handler method: add_hidden(handler)
Remove event handler method: remove_hidden(handler)
Raise event method: raise_hidden()

hiding
Fires when the popup is being hidden
Add event handler method: add_hiding(handler)
Remove event handler method: remove_hiding(handler)
Raise event method: raise_hiding()

showing
Fires when the popup is being shown
Add event handler method: add_showing(handler)
Remove event handler method: remove_showing(handler)
Raise event method: raise_showing()

shown
Fires when the popup is shown
Add event handler method: add_shown(handler)
Remove event handler method: remove_shown(handler)
Raise event method: raise_shown()

Last edited Sep 14, 2015 at 10:02 AM by fadilmamedov, version 3