Ajax ModalPopupExtender

Actual Functionality Of A Modal Popup:
Modal pop ups were among the first JavaScript effects to be widely adopted by web Sites like Google and Amazon who were looking for an interactive edge with their Customers.

The window.alert( ) method implements the effect, however, the layout of these pop ups could not be changed. Thanks to CSS and the DOM, today you can Create better pop ups, without the need to open new windows.

Modal pop ups are commonly generated by creating a new DOM element (usually a <div> container), using JavaScript to display the element, then CSS to style it. To Make the pop up modal, you also create a second <div> element that consumes the Complete display area of the browser.

Then using the z-order CSS property (which Sets the virtual z coordinate of an element, effectively placing elements in front of or Behind each other), stack both elements over the current content of the page; “100%
display area” <div> first, then the pop up <div>.

Now The stacking part is taken care of by ASP.NET AJAX; you just have to provide the rest.

Then, the original content of the page is still visible, but since a 100 percent width, 100 percent height element is placed over it, the user cannot click any links outside the pop up, effectively making the pop up modal.

Steps for Creating Modal popup:
The first step to implement this is to create the appropriate CSS classes. We need two: one for the pop up, one for the 100 percent display area <div>.
For the first class, we just apply a border, a background color, and a width (the height is determined automatically by the browser’s rendering engine):

.popup {
border: solid;
background-color: yellow;
width: 200px;
}

The second CSS class also uses a background color, such as gray, but we also set an opacity value so that the background (the content of the page) is visible through the element. Internet Explorer supports the filter property for this task, and all other browsers use the opacity style.

.content {
background-color: grey;
filter: alpha(opacity=50);
opacity: 0.5;
}

Next, we need a server control to display the modal pop up. A link is a good choice:
<asp:HyperLink ID="HyperLink1" runat="server" Text="More ..." NavigateUrl="#" />
Now we create the actual pop up. As shown here, the user could be prompted to log in:

<asp:Panel ID="popupPanel" runat="server" CssClass="popup">
<p>Login to get more information!<br />
User <input type="text" /> - Password <input type="password" />
<input type="button" value="Login" id="Button1" runat="server" />
</p>
</asp:Panel>

Finally, the ModalPopupExtender from the ASP.NET AJAX Control Toolkit comes into play. It lets you create a modal pop up that can be put over the current content of the page. This includes a bit of work, both from the toolkit and from you. You will need the following properties for ModalPopupExtender:

BackgroundCssClass:The CSS class to use to make the page’s contents look disabled
PopupControlID:The ID of the pop up to display
TargetControlID:The ID of the element that triggers showing the pop up
OKControlID:The ID of the element that lets the pop up disappear
(The default position is the center of the page.)

A Complex Modal PopUp:
In this situation, Assume that we have a Registration form which may contains username, password, conformpassword,Email. Then we have a Register Button, when user clicks on Register Button we have to perform Following actions

• Check the validation
• If validation success then dispaly Licensense Aggreement in ModelPopup.

In this situation modelpopup will not display if gave TargetControlID="btnregister". For this purpose we have to take an hidden button pass the hidden button id as TargetControlID.
In the register button click event write the follwing code
modelpopup.show();
Now when the validation successful then only modal popup control visible.
You can download the complete source code. Click Here