ModalPopupExtender

Demo Page

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

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
dropShadow	A Boolean value that specifies whether or not a drop shadow should be added 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 by the element specified using the cancelControlID property
onHidden	A JSON definition of generic OnShowing Animation. Played before the Popup is hidden
onHiding	A JSON definition of generic OnShowing Animation. Played before the Popup is being hidden
onOkScript	A script to run when the modal popup is dismissed by the element specified using the okControlID property
onShowing	A JSON definition of generic OnShowing Animation. Played before the Popup is being shown
onShown	A JSON definition of generic OnShowing Animation. Played before the Popup is shown
popupControlID	ID of an element to display as a modal popup
popupDragHandleControlID	ID of an element to display as a drag handle for the modal popup
repositionMode	The Sys.Extended.UI.ModalPopupRepositionMode object that determines whether the modal popup should be repositioned on window resize or scroll
x	The distance from the left side of the modal popup to the left border of the browser window in pixels
y	The distance from the top side of the modal popup to the top border of the browser window in pixels

Client methods

Name	Description
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

Name	Description
hidden	Fires when the popup is hidden
hiding	Fires when the popup is being hidden
showing	Fires when the popup is being shown
shown	Fires when the popup is shown

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

Remarks: This property is obsolete.

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()