Skip to main content

Modal Popup Extender Example in .NET

Firstly we need to add CSS classes.


.modalBackground
{
  background-color:#CCCCFF;
  filter:alpha(opacity=40);
  opacity:0.5;
}
.modalWindow
{
  border: solid1px#c0c0c0;
  background:#f0f0f0;
  padding: 0px10px10px10px;
  position:absolute;
  top:-1000px;
}

After that Write the following code behind the aspx page.


<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"
TargetControlID="lnkPopup"
PopupControlID="panEdit"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
PopupDragHandleControlID="panEdit">
</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="panEdit"runat="server"Height="180px"Width="400px"CssClass="modalWindow">
       
        <table width="100%">
            <tr>
                <td>
                    User Name:
                </td>
                <td>
                    <asp:TextBox ID="txtusername" runat="server"></asp:TextBox>
                </td>
            </tr>           
       </table>
       <br />
       <asp:Button ID="Button1" runat="server" Text="Update"/>
       <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>








Comments

  1. JamilJune 15, 2011 at 7:48 AM

    welcome to the blogging world missi!!! :D hope you will continue this effort. keep it up... all the best!!! ;)

    ReplyDelete
  2. MahrukhJune 15, 2011 at 7:49 AM

    Thanks jamil..:)

    ReplyDelete
  3. AsimJune 16, 2011 at 9:45 AM

    This is a nice effort, I was looking for Modal Popup Extender. Your blog is very helpful for fresh developers.
    Thanks.

    ReplyDelete

Post a Comment

Popular posts from this blog

Azure App Deployment

I will use the same web application which we created in my previous article ASP.NET MVC5 . Launch the publish wizard In the solution explorer right click the project  MVCProject  and select Publish. The publish wizard is automatically launched. Select the App Service  > Publish to open the Create App Service dialog. Sign in to Azure In the Create App Service dialog, Select Add an account and Sign in to your Azure subscription. if you already have an account then don't select Create . Once you select the Azure account you will see the following details on the dialog box Create a resource group A resource group is a logical container into which web apps, databases, and storage accounts are deployed and managed.we can delete the whole storage group with a single step. In dialog Next to Resource Group select New Enter MVCGroup name and click OK Create an App Service plan An...
Post a Comment
Read more

ASP.NET AJAX PasswordStrength Extender

  AJAX Password Strength Extender shows the strength of user chosen passwords.the strength can be show in a  text form, a bar indicator or combination of both.Now i am going to show you how to add ajax password extender control to a asp.net page, In case of Visual studio 2005 install AjaxControlToolkit and in case of Visual studio 2010 add AjaxControlToolkit.dll in the project. I have added a text box and a label control in the page and page will be look like this:                                               After that Add password strength code in the aspx file of the web page. <body>     <form id="form1" runat="server">         <asp:ScriptManager ID="ScriptManager1" runat="ser...
4 comments
Read more

How To Create Windows Form Application in C# Part 1

To create a C# Windows application Open visual studio On the  File  menu, click  New Project . The  New Project  dialog box appears. This dialog box lists the different default application types that Visual C# Express Edition can create. Select  Windows Forms Application  as your project type. Change the name of your application. Click  OK . Or in VS 2010: When you click OK, a new Windows Application project will be created To see the window where you'll write most of your code, right click  Form1.cs  in the Solution Explorer: Now double click  Form1.Designer.cs . You'll see the following code: Here you can write your code according to requirement. After that You can  Debug the Application     From the   menu at the top, click   Start Debugging   (Or you can just press the F5 key on your keyboard.): In next post i will tell you how to drag controls on Form and how to write control events. Happ...
9 comments
Read more