Building Web Sites with ASP.NET - Part 1
page 3 of 6
by Brian Mains
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 29109/ 63

Modal Popups

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.


View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-24 11:47:58 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search