My first attempt to go back into .Net was trying to do the ModalPopUp. It is an AJAX component and is being used widely in some of the website, including this website too. Do you notice, when you change and choose your new theme, the background of the current page turns black and let you preview the selected theme before activating it. That’s one of the examples.
I tried this feature when I do the login page for my 1st tutorial. It needs a panel and ModalPopUp extender to do it. The panel contains the username and password textboxes and 2 buttons for login and cancel. The ModalPopUp extender works when the login or cancel button is clicked. I can use CSS for this part to make it more interesting. I need a function to make it works.
Here, is the screenshot.
- ModalPopUp
It is using javascript to run. I wanted to try using C# code to display the welcome note instead of using the javascript to display the message.
Sample coding:
1) Insert a scriptmanager control on to the page.
2) To have the modal popup, you have to put the text that you want to display inside a panel and use the AJAX modalpopup extender to display it.
<asp:Panel ID=”Panel1″ runat=”server” CssClass=”modalPopup” style=”display:none;”>
This is basic modal popup.
<br /><br />
<asp:Button ID=”btnOk” runat=”server” Text=”Ok” />
<asp:Button ID=”btnClose” runat=”server” Text=”Close Me” />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender
BackgroundCssClass=”modalBackground”
DropShadow=”true”
OkControlID=”btnOk”
CancelControlID=”btnClose”
runat=”server”
PopupControlID=”Panel1″
id=”ModalPopupExtender1″
TargetControlID=”Button1″ />
3) In order to call this AJAX modalpopup extender, you can add a button to call it.
<asp:Button ID=”Button1″ runat=”server” Text=”First Modal Popup” />
4) For styling the AJAX modalpopup extender, you can do a simple like this,
.modalBackground {
background-color:#fff;
filter:alpha(opacity=70);
opacity:0.7px;
}
5) If you want to use the javascript to close the button,
OnCancelScript=”CloseScript()”
Examples:
http://www.chrismanciero.com/modalpopupextender.aspx
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-modalpopup-extender-control
My Learning Bible 