I want to take this opportunity to introduce a sample application which shows how to use the
ModalPopupExtender for logging and signup for any ASP.NET web application. In this quick
demonstration, I am going to show you how we can implement a modal dialog box using AJAX in
ASP.NET. A modal dialog box (formally called a ModalPopupExtender) is extremely essential in today’s
applications as it avoids redirecting to a new page just to login or signup users. A simple example is
shown here illustrates how to implement the same.
I was looking around to see samples of how to use the ModalPopupExtender for login and signup for
my site…but I could not find any. So finally, I ended up creating this login sample application so it might
be useful for everyone.
To start with, let’s try to understand the ModalPopupExtender.
The ModalPopupExtender allows a page to display content to the user in a “modal” manner which
prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of
controls and is displayed above a background that can have a custom style applied to it. When
displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing.
When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the
modal content and optionally runs a custom script.
The control is initialized with this code. The display on the modal popup element is set to None to avoid
a flicker on render. The italic properties are optional:
<ajaxToolkit:ModalPopupExtender ID=”MPE” runat=”server”
ID of the element that activates the modal popup
ID of the element to display as a modal popup
to True to automatically add a dropshadow
to the modal popup
ID of the element that dismisses the modal popup
to run when the modal popup is dismissed with the OkControlID
ID of the element that cancels the modal popup
to run when the modal popup is dismissed with the