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

Introduction of Arrays

An array is a linear data structure which stores collection of data in a contagious memory location. The idea is to store the collection of the same type of data. this makes it easier to calculate the position of each item by simply adding an offset to a base value. In the above image of an array, we can identify each element by its index. we can declare an array by specifying the types of its element. type [] arrayname; Types of Arrays single dimensional arrays Multidimensional arrays Single Dimensional Arrays A single dimensional array can be declared in the following way. int [] array = new int [ 5 ]; this array will contain the element from array[0] to array[4].the new operator will initialize  each  element of this array with zero. An array which contains string value can be declared the same way. string[] array = new string[6]; Array Initializ...
Post a Comment
Read more

ASP.NET MVC 5 (Part 1)

This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using  Visual Studio 2017 . Get started Start by installing Visual Studio 2017. You can  Install Visual Studio 2017 community version which is free. Open Visual Studio,  Instead of selecting  New Project  on the  Start page , you can use the menu bar and select  File  >  New Project . Your first app On the  Start page , select  New Project . In the  New Project  dialog box, select the  Visual C#  category on the left, then  Web , and then select the  ASP.NET Web Application (.NET Framework)  project template. Name your project "MVCProject" and then choose  OK . In the  New ASP.NET Web Application  dialog, choose  MVC  and then choose  OK . The visual studio used the default template for the project you just created.you have a running applicat...
Post a Comment
Read more

ASP.NET MVC 5 (Part 2)

Before you start this tutorial, you should have the knowledge about, how to create an ASP .NET MVC   web application. MVC stands for the model- View- controller. MVC is an architectural pattern for developing applications that are well architectured, testable and easy to maintain. MVC application contains: Model : classes represent the data of the application. A model does not depend on the controller and view classes. View : Display the model data and send user action (button click) to the controller. Controller : provides the model data to the view and interprets user actions like button click. the controller depends on the model and the view. Controller Let 's start by adding a controller class in MVCProject .In Solution Explorer, right click on the controller folder and select controller.   In the Add scaffold dialogue box,  select MVC 5 controller-empty and then click Add. Name your controller FirstTest, and click the A...
Post a Comment
Read more