Show Modal Popup Window using jQuery

The following is my data table from which I am reading records and will add data by reading from a modal popup window:

table design
Figure 1.

The following is the script of the table:

  1. CREATE TABLE [dbo].[Employee](  
  2. [ID] [int] IDENTITY(1,1) NOT NULL,  
  3. [Name] [varchar](50) NULL,  
  4. [Email] [varchar](500) NULL,  
  5. [Country] [varchar](50) NULL,  
  6. [ProjectID] [intNULL,  
  7. [ManagerName] [varchar](50) NULL,  
  8. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED  
  9. (  
  10. [ID] ASC  
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,  
  12. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]  
  13. ON [PRIMARY]  
  14. GO  
Currently the following is the data in my table:

data in my table
Figure 2.

Here I am filling in my Grid View using jQuery JSON. Now create a new Visual Studio solution and add a jQuery reference.

The following is my aspx:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryModalPopup.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Modal Popup using jQuery</title>  
  6.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  7.     <link href="StyleSheet1.css" rel="stylesheet" />  
  8.     <script src="Scripts/jquery-ui.min.js"></script>  
  9.     <style type="text/css">  
  10.         .auto-style1 {  
  11.             width: auto;  
  12.             position: relative;  
  13.             left: 20px;  
  14.             width: 100%;  
  15.         }  
  16.     </style>  
  17.     <script type="text/javascript">  
  18.         $(document).ready(function () {  
  19.             $('#gvData').empty();  
  20.             $.ajax({  
  21.                 type: "POST",  
  22.                 contentType: "application/json; charset=utf-8",  
  23.                 url: "Default.aspx/BindEmployees",  
  24.                 data: "{}",  
  25.                 dataType: "json",  
  26.                 success: function (result) {  
  27.                     $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");  
  28.                     for (var i = 0; i < result.d.length; i++) {  
  29.                         if (i % 2 == 0) {  
  30.                             $("#gvData").append("<tr  style='background-color:#F5FBEF; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");  
  31.                         }  
  32.                         else {  
  33.                             $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");  
  34.                         }  
  35.                     }  
  36.                 },  
  37.                 error: function (result) {  
  38.                     alert("Error");  
  39.                 }  
  40.             });  
  41.   
  42.             //Open Modal Popup  
  43.             $('#btnAddEmployee').click(function () {  
  44.                 var id = '#dialog';  
  45.                 var maskHeight = $(document).height();  
  46.                 var maskWidth = $(document).width();  
  47.   
  48.                 $('#mask').css({ 'width': maskWidth, 'height': maskHeight });  
  49.   
  50.                 $('#mask').fadeIn(1000);  
  51.                 $('#mask').fadeTo("slow", 0.8);  
  52.   
  53.                 var winH = $(window).height();  
  54.                 var winW = $(window).width();  
  55.                 $(id).css('top', winH / 2 - $(id).height() / 2);  
  56.                 $(id).css('left', winW / 2 - $(id).width() / 2);  
  57.   
  58.                 //transition effect  
  59.                 $(id).fadeIn(2000);  
  60.   
  61.                 return false;  
  62.             });  
  63.             $('.window .close').click(function (e) {  
  64.                 e.preventDefault();  
  65.                 $('#mask').hide();  
  66.                 $('.window').hide();  
  67.             });  
  68.   
  69.             //Add New Employee  
  70.             //===========================================  
  71.             $('#btnSubmitEmployee').click(function (e) {  
  72.                 var empName = $('#txtName').val();  
  73.                 var email = $('#txtEmail').val();  
  74.                 var country = $('#ddlCountry').val();  
  75.                 var project = $('#ddlProject').val();  
  76.                 var manager = $('#ddlManager').val();  
  77.   
  78.                 var JSONObject = { "Name": empName, "Email": email, "Country": country, "Project": project, "Manager": manager };  
  79.                 var jsonData = JSON.stringify(JSONObject);  
  80.   
  81.                 $.ajax({  
  82.                     type: "POST",  
  83.                     contentType: "application/json; charset=utf-8",  
  84.                     url: "Default.aspx/AddNewEmployee",  
  85.                     data: jsonData,  
  86.                     dataType: "json",  
  87.                     success: function (data) {   
  88.                     },  
  89.                     error: function (result) {  
  90.                         alert("Error");  
  91.                     }  
  92.                 });  
  93.   
  94.                 $('#gvData').empty();  
  95.                 $.ajax({  
  96.                     type: "POST",  
  97.                     contentType: "application/json; charset=utf-8",  
  98.                     url: "Default.aspx/BindEmployees",  
  99.                     data: "{}",  
  100.                     dataType: "json",  
  101.                     success: function (result) {  
  102.                         $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");  
  103.                         for (var i = 0; i < result.d.length; i++) {  
  104.                             if (i % 2 == 0) {  
  105.                                 $("#gvData").append("<tr  style='background-color:#F5FBEF; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");  
  106.                             }  
  107.                             else {  
  108.                                 $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");  
  109.                             }  
  110.                         }  
  111.                     },  
  112.                     error: function (result) {  
  113.                         alert("Error");  
  114.                     }  
  115.                 });  
  116.             });  
  117.   
  118.             //===========================================  
  119.         });  
  120.     </script>  
  121. </head>  
  122. <body>  
  123.     <form id="form1" runat="server">  
  124.         <div>  
  125.             <table style="width: 100%; text-align: center; border: solid 5px red; background-color: blue; vertical-align: top;">  
  126.                 <tr>  
  127.                     <td>  
  128.                         <div>  
  129.                             <fieldset style="width: 99%;">  
  130.                                 <legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Modal Popup Show</legend>  
  131.                                 <table style="width: 100%;">  
  132.                                     <tr>  
  133.   
  134.                                         <td>  
  135.                                             <input id="btnAddEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />  
  136.                                         </td>  
  137.                                     </tr>  
  138.                                     <tr>  
  139.   
  140.   
  141.                                         <td style="vertical-align: top; background-color: #9DD1F1; text-align: center;">  
  142.                                             <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True" BackColor="White" GridLines="Both"  
  143.                                                 BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">  
  144.                                                 <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />  
  145.                                                 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />  
  146.                                                 <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />  
  147.                                                 <RowStyle BackColor="White" ForeColor="#330099" />  
  148.                                                 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />  
  149.                                                 <SortedAscendingCellStyle BackColor="#FEFCEB" />  
  150.                                                 <SortedAscendingHeaderStyle BackColor="#AF0101" />  
  151.                                                 <SortedDescendingCellStyle BackColor="#F6F0C0" />  
  152.                                                 <SortedDescendingHeaderStyle BackColor="#7E0000" />  
  153.                                             </asp:GridView>  
  154.                                         </td>  
  155.                                     </tr>  
  156.                                 </table>  
  157.   
  158.                             </fieldset>  
  159.                         </div>  
  160.                     </td>  
  161.                 </tr>  
  162.   
  163.             </table>  
  164.   
  165.         </div>  
  166.         <div id="boxes">  
  167.             <div id="mask">  
  168.                 <div id="dialog" class="window">  
  169.                     <div id="headerBorder">  
  170.                         Add New Employee #  
  171.         <div id="close" class="close">[X]</div>  
  172.                     </div>  
  173.                     <table style="background-color: skyblue; width: 100%; text-align: left;">  
  174.   
  175.                         <tr>  
  176.                             <td style="text-align: left; padding-left: 5px;">  
  177.                                 <asp:Label ID="lblName" runat="server" Text="Name:" Width="80px"></asp:Label></td>  
  178.                             <td style="text-align: left;">  
  179.                                 <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>  
  180.                         </tr>  
  181.                         <tr>  
  182.                             <td style="text-align: left; padding-left: 5px;">  
  183.                                 <asp:Label ID="Label1" runat="server" Text="Email:" Width="80px"></asp:Label></td>  
  184.                             <td style="text-align: left;">  
  185.                                 <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>  
  186.                         </tr>  
  187.                         <tr>  
  188.                             <td style="text-align: left; padding-left: 5px;">  
  189.                                 <asp:Label ID="Label2" runat="server" Text="Country:" Width="80px"></asp:Label></td>  
  190.                             <td style="text-align: left;">  
  191.                                 <asp:DropDownList ID="ddlCountry" runat="server">  
  192.                                     <asp:ListItem Text="India" Value="India"></asp:ListItem>  
  193.                                     <asp:ListItem Text="USA" Value="USA"></asp:ListItem>  
  194.                                     <asp:ListItem Text="South Africa" Value="South Africa"></asp:ListItem>  
  195.                                     <asp:ListItem Text="Singapore" Value="Singapore"></asp:ListItem>  
  196.                                 </asp:DropDownList></td>  
  197.                         </tr>  
  198.                         <tr>  
  199.                             <td style="text-align: left; padding-left: 5px;">  
  200.                                 <asp:Label ID="Label3" runat="server" Text="Manager:" Width="80px"></asp:Label></td>  
  201.                             <td style="text-align: left;">  
  202.                                 <asp:DropDownList ID="ddlManager" runat="server">  
  203.                                     <asp:ListItem Text="Shambhu Sharma" Value="Shambhu Sharma"></asp:ListItem>  
  204.                                     <asp:ListItem Text="Hemant Chopra" Value="Hemant Chopra"></asp:ListItem>  
  205.                                     <asp:ListItem Text="Mohit Kalra" Value="Mohit Kalra"></asp:ListItem>  
  206.                                     <asp:ListItem Text="Vishwa M Goswami" Value="Vishwa M Goswami"></asp:ListItem>  
  207.                                 </asp:DropDownList>  
  208.                             </td>  
  209.                         </tr>  
  210.                         <tr>  
  211.                             <td style="text-align: left; padding-left: 5px;">  
  212.                                 <asp:Label ID="Label4" runat="server" Text="Project:" Width="80px"></asp:Label></td>  
  213.                             <td style="text-align: left;">  
  214.                                 <asp:DropDownList ID="ddlProject" runat="server">  
  215.                                     <asp:ListItem Text="AMX" Value="1"></asp:ListItem>  
  216.                                     <asp:ListItem Text="HWN" Value="2"></asp:ListItem>  
  217.                                     <asp:ListItem Text="CSR" Value="3"></asp:ListItem>  
  218.                                     <asp:ListItem Text="RDS" Value="4"></asp:ListItem>  
  219.                                 </asp:DropDownList>  
  220.   
  221.                             </td>  
  222.                         </tr>  
  223.                         <tr>  
  224.                             <td></td>  
  225.                             <td>  
  226.                                 <input id="btnSubmitEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />  
  227.                             </td>  
  228.                         </tr>  
  229.                     </table>  
  230.                 </div>  
  231.             </div>  
  232.         </div>  
  233.     </form>  
  234. </body>  
  235. </html>  
Now my aspx.cs is:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Services;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10.   
  11. namespace jQueryModalPopup  
  12. {  
  13.     public partial class Default : System.Web.UI.Page  
  14.     {  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.             if (!Page.IsPostBack)  
  18.             {  
  19.                 BindGridWithDummyRow();  
  20.             }  
  21.         }  
  22.   
  23.         public void BindGridWithDummyRow()  
  24.         {  
  25.             DataTable dt = new DataTable();  
  26.             dt.Columns.Add("ID");  
  27.             dt.Columns.Add("Name");  
  28.             dt.Columns.Add("Email");  
  29.             dt.Columns.Add("Country");  
  30.   
  31.             dt.Columns.Add("ProjectID");  
  32.             dt.Columns.Add("ManagerName");  
  33.             gvData.DataSource = dt;  
  34.             gvData.DataBind();  
  35.         }  
  36.   
  37.         [WebMethod]  
  38.         public static Employee[] BindEmployees()  
  39.         {  
  40.             string connectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";  
  41.             DataTable dt = new DataTable();  
  42.             List<Employee> employeeList = new List<Employee>();  
  43.             using (SqlConnection con = new SqlConnection(connectionString))  
  44.             {  
  45.                 using (SqlCommand command = new SqlCommand("select e.ID, e.Name,e.Email,e.Country,ProjectName,e.ManagerName from Employee as e Inner join project as p on e.ProjectID=p.ProjectID", con))  
  46.                 {  
  47.                     con.Open();  
  48.                     SqlDataAdapter da = new SqlDataAdapter(command);  
  49.                     da.Fill(dt);  
  50.                     foreach (DataRow dtrow in dt.Rows)  
  51.                     {  
  52.                         Employee employee = new Employee();  
  53.                         employee.ID = Convert.ToInt32(dtrow["ID"].ToString());  
  54.                         employee.Name = dtrow["Name"].ToString();  
  55.                         employee.Email = dtrow["Email"].ToString();  
  56.                         employee.Country = dtrow["Country"].ToString();  
  57.                         employee.ProjectID = dtrow["ProjectName"].ToString();  
  58.                         employee.ManagerName = dtrow["ManagerName"].ToString();  
  59.                         employeeList.Add(employee);  
  60.                     }  
  61.                 }  
  62.             }  
  63.             return employeeList.ToArray();  
  64.         }  
  65.   
  66.         [WebMethod]  
  67.         public static void AddNewEmployee(string Name, string Email, string Country, string Project, string Manager)  
  68.         {  
  69.             string connectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";  
  70.             DataTable dt = new DataTable();  
  71.             List<Employee> employeeList = new List<Employee>();  
  72.             using (SqlConnection con = new SqlConnection(connectionString))  
  73.             {  
  74.                 using (SqlCommand command = new SqlCommand("INSERT INTO Employee (Name, Email, Country, ProjectID, ManagerName) VALUES ('" + Name + "' , '" + Email + "' , '" + Country + "' , '" + Project + "' , '" + Manager + "')", con))  
  75.                 {  
  76.                     con.Open();  
  77.                     SqlDataAdapter da = new SqlDataAdapter(command);  
  78.                     da.Fill(dt);  
  79.                 }  
  80.             }  
  81.         }  
  82.     }  
  83. }  
Here I am using an Employee Class:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace jQueryModalPopup  
  7. {  
  8.     public class Employee  
  9.     {  
  10.         public int ID { getset; }  
  11.         public string Name { getset; }  
  12.         public string Email { getset; }  
  13.         public string Country { getset; }  
  14.         public string ProjectID { getset; }  
  15.         public string ProjectName { getset; }  
  16.         public string ManagerName { getset; }  
  17.     }  
  18. }  
code
Figure 3.

Now run your application to check.

run your application
Figure 4.

Click on the Add Employee button.

Add Employee button
Figure 5.

Enter values and click on the Add Employee button to save the information.

Add Employee button to save information
Figure 6.

 

Up Next
    Ebook Download
    View all
    Learn
    View all