Ajax Control Toolkit ModalPopup

Modified on 2010/04/16 00:44 by Stephen Walther — Categorized as: Uncategorized

The ModalPopup extender allows you to display content in an element that mimics a modal dialog box, which prevents the user from interacting with the rest of the page. The modal content can contain any hierarchy of controls. It is displayed above a 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 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 the postback.

By default, the modal content is centered on the page. However, you can set absolute positiniong, and set only X or only Y to center the content vertically or horizontally.

ModalPopup Server Reference

The properties in italics are optional.

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />

TargetControlID - The ID of the element that activates the modal popup.
PopupControlID - The ID of the element to display as a modal popup.
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed.
DropShadow - True to automatically add a dropshadow to the modal popup.
OkControlID - The ID of the element that dismisses the modal popup.
OnOkScript - The script to run when the modal popup is dismissed using the element specified in OkControlID.
CancelControlID - The ID of the element that cancels the modal popup.
OnCancelScript - The script to run when the modal popup is dismissed using the element specified in CancelControlID.
PopupDragHandleControlID - The ID of the embedded element that contains the popup header and title that will be used as a drag handle.
X - The X coordinate of the top left corner of the modal popup. 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. If this value is not specified, the popup will be centered vertically.
RepositionMode - A value that determines whether the popup must be repositioned when the window is resized or scrolled.

ModalPopup Client Reference

Sys.Extended.UI.ModalPopupBehavior Class

Summary - Displays the target element as a pop-up modal dialog box.
Parameters - Sys.UI.DomElement element

Events

showing(handler) - Adds or removes an event handler for the showing event.
- Parameters - A function that represents the event handler.
shown(handler) - Adds or removes an event handler for the shown event.
- Parameters - A function that represents the event handler.
hiding(handler) - Adds or removes an event handler for the hiding event.
- Parameters - A function that represents the event handler.
hidden(handler) - Adds or removes an event handler for the hidden event.
- Parameters - A function that represents the event handler.

Methods

initialize() - Initializes the ModalPopup behavior.
dipose() - Disposes the ModalPopup behavior.
show() - Displays the element that is referenced by the PopupControlID property as a modal dialog box.
disableTab() - Changes the tab indexes so that tabbing moves the focus only through the modal dialog box.
- Remarks - In Internet Explorer 6, the disableTab method also hides the select elements.
restoreTab() - Restores the tab indexes from the page.
- Remarks - In Internet Explorer 6, the restoreTab method also restores the select elements.
hide() - Hides the modal popup.
- Returns - Returns a Boolean value that specifies whether the popup was hidden.
raiseShowing(Sys.EventArgs) - Raises the showing event.
- Parameters - A Sys.EventArgs object that represents arguments for the showing event.
raiseShown(Sys.EventArgs) - Raises the shown event.
- Parameters - A Sys.EventArgs object that represents arguments for the shown event.
raiseHiding(Sys.EventArgs) - Raises the hiding event.
- Parameters - A Sys.EventArgs object that represents arguments for the hiding event.
raiseHidden(Sys.EventArgs) - Raises the hidden event.
- Parameters - A Sys.EventArgs object that represents arguments for the hidden event.
Sys.Extended.UI.ModalPopupBehavior.invokeViaServer(behaviorID, show) - Shows or hides the behavior that is associated with behaviorID. This method is intended to be called from script that is emitted in server code.
- Parameters - String behaviorID, Boolean show.
- Remarks - To use this static method, the ModalPopupExtender instance must have its ID or its BehaviorID property set. The method shows or hides the behavior depending on the show parameter.

Properties

PopupControlID - Gets or sets the ID of the element to display as a modal popup.
X - Gets or sets the distance, in pixels, from the left side of the modal popup to the left border of the browser window.
Y - Gets or sets the distance, in pixels, from the top side of the modal popup to the top border of the browser window.
PopupDragHandleControlID - Gets or sets the ID of the element to display as the drag handle for the modal popup.
BackgroundCssClass - Gets or sets the CSS class to apply to the background when the modal popup is displayed.
DropShadow - Gets or sets a Boolean value that specifies whether a dropshadow should be added to the modal popup.
Drag - Gets or sets a Boolean value that specifies whether the modal popup can be dragged.
- Remarks - OBSOLETE.
OkControlID - Gets or sets the ID of the element that dismisses the modal popup.
CancelControlID - Gets or sets the ID of the element that cancels the modal popup.
OnOkScript - Gets or sets the script to run when the modal popup is dismissed by the element specified using the OkControlID property.
OnCancelScript - Gets or sets the script to run when the modal popup is dismissed by the element specified using the CancelControlID property.
repositionMode - Gets or sets a Sys.Extended.UI.ModalPopupRepositionMode object that determines whether the modal popup should be repositioned on window resize or on window scroll.

Sys.Extended.UI.ModalPopupRepositionMode Enum

Summary - Describes how the modal popup can be repositioned.

Fields

For

None - A field that specifies the modal popup reposition action.
RepositionOnWindowResize - A field that specifies the modal popup reposition action.
RepositionOnWindowScroll - A field that specifies the modal popup reposition action.
RepositionOnWindowResizeAndScroll - A field that specifies the modal popup reposition action.