AJAX ModalPopup Control Extender

by top54u.com 29 May, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net AJAX Tab Extender CSS Class Styles

ASP.Net AJAX Tab Control Extender

ASP.Net AJAX Star Rating Extender Control

ASP.Net AJAX Password Strength Extender Control

ASP.Net AJAX Cascading Dropdown Control Extender

ASP.Net AJAX NoBot Extender Control

Introduction

In ASP.Net 2.0 AJAX control toolkit provides a very useful control as ModalPopupExtender that provides the functionality of popup without opening the new browser window. ModalPopupExtender works within the same window of web browser that popup on the fixed content of a page. ModalPopup extender control disables the fixed content on the web page, places a layer on it and displays a new web form with other interactive controls to get the user input.

You can customize the look and feel of modalpopupextender by using CSS styles, also you can fix the absolute position of modalpopup according to X or Y axis of browser window.

You can perform the action by using either Javascript or Server side code using C# or VB along with ModalPopup, based on which button clicked by the user. ModalPopupextender consists of OK, Cancel properties to associate the ID of corresponding buttons with it to call the customs scripts according to the action.

AJAX ModalPopupExtender Control Properties

TargetControlID: ID of the button or link button control that will produce the ModalPopup.

PopupControlID: You can pass the ID of panel server control having the controls layout inside it that will appear as a modal popup on the web page.

OkControlID: ID of the button that will run the custom script to apply the user input.

CancelControlID: ID of the button that will close the modal popup without performing any action.

OnOkScript: You can pass the client end Javascript function here that will execute when the user will hit the associated OK button.

X: Adjusts the horizontal position of modalpopup in pixels.

Y: Adjusts the vertical position of modalpopup in pixels.

RepostionMode: RepositionMode allows to repostion the modalpopup when the web page is resized or scrolled. You can select the following values to adjust this property:

RepositionOnWindowResize
RepositionOnWindowResizeAndScroll
RepositionOnWindowScroll
None

DropShadow: If true then displays a shadow of ModalPopup.

PopupDragHandleControlID: ID of the control that can be used to drag the ModalPopup.

Customization of ModalPopupExtender Control

CSS Code:

body {
margin:0px;
font-family:Verdana;
font-size:11px
}

.button {
border:solid 1px #c0c0c0;
background-color:#eeeeee;
font-family:verdana;
font-size:11px;
}

.modalBg {
background-color:#cccccc;
filter:alpha(opacity=80);
opacity:0.8;
}

.modalPanel {
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:320px;
}

</style>

You can use the BackgroundCssClass property to change the background color of layer to hide the fixed content of web page.

Sample code of ModalPopupExtender:

<ajaxToolkit:ModalPopupExtender BackgroundCssClass="modalBg" DropShadow="true" ID="ModalPopupExtender1" PopupControlID="Panel1" runat="server"
TargetControlID="lnkUpdate" PopupDragHandleControlID="Panel2" OkControlID="btnOK" OnOkScript="onOK()" CancelControlID="btnCancel">
</ajaxToolkit:ModalPopupExtender>

Download the free sample code for ModalPopupExtender here…

ajax modalpopup extender.zip (2.08 kb)

Spotlight.....

Be the first to rate this post