We will start with the first feature of modal popups through
the ModalPopupExtender. This extender pops up a panel whenever the target
control is clicked. The target is usually a button, but in this case the target
is the login status control (which under the hood is a button). When the login
status is clicked, it pops up a panel to login (for logging in only).
Listing 2
<asp:LoginStatus ID="lgsLogin" runat="server" CssClass="SiteLayoutMenuBarItem" />
<asp:Panel ID="pnlLogin" runat="server" CssClass="ModalPopupPanelBackground">
Please login to the application.<br /><br />
<asp:Login ID="lgnLogin" runat="server" />
<br /> <hr /> <br />
Use the form below to email your password to you.<br /><br />
<asp:PasswordRecovery ID="prLogin" runat="server" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeLogin" runat="server" TargetControlID="lgsLogin"
PopupControlID="pnlLogin" CancelControlID="btnCancel"
BackgroundCssClass="ModalPopupBackground" />
The ModalPopupExtender targets the LoginStatus control, the
first element, through its TargetControlID. It knows to popup a Panel, the
second element, because the PopupControlID is set to its ID. Now, instead of
the default click action, the modal popup appears when the LoginStatus is
clicked, and allows the user to login through a modal interface.
The modal interface allows the user to login or recover
their password. The action can be cancelled using the cancel button. The
ModalPopupExtender can target an OK and Cancel button for the modal window,
which will close the window when clicked.
Let us take a look at what this looks like in the
application. When the button is clicked, the following screen appears.
Figure 4
Notice the gray background; this background covers the
entire screen, preventing the user from making any modifications to the
background information. The user has to focus his or her attention solely on
the login/password recovery process at hand.
