Post
Ask Question

HTML, CSS, And JavaScript Based Modal Popup in ASP.NET

This article focuses on the following things.

  • What is Modal Popup?
  • Types of Modal Popups that can be create in Asp.Net.
  • HTML, CSS and Javascript Code - Logic Explanation
  • Step by Step Implementation of HTML, CSS and Javascript based Modal Popups.

What is Modal Popup?

Modal popup is a child window on the main window, that disables the main window functionality until the selection of a button in the child window.

In a sample image given below, I have shown the modal popup window.



Types of Modal Popups that can be created in ASP.NET

To the best of my knowledge, we can create three types of modal popups, through the following ways.

  1. HTML, CSS, and JavaScript.
  2. jQuery based (With different jQuery plugins)
  3. AjaxControlToolkit Modal Popup Extender.

HTML, CSS and JavaScript

It is very simple and very lightweight because this is a pure HTML and CSS based modal popup.

jQuery based

It is also light-weight but heavier than the HTML, CSS based one, because of the implementation of jQuery and plugins.

AjaxControlToolKit Modal Popup Extender

It runs through AjaxControlToolKit and is heavy weight.

In this article, we have created the following types of Modal Popups.



Where the popup receives confirmation from the user for whether to delete selected record or not. -  Yes/No.

  • HTML,CSS and JavaScript Code - Logic Explanation

Code Description:

For each friend, I have created a separate modal popup. To have unique id on div tag, I have attached FriendID. You can see the below mentioned code.

HTML CODE

Very simple and straight forward code of HTML. 

  1. <%--Start Delete Modal Popup--%>  
  2.   
  3.                     <div id='overlay-<%# Eval("FriendID")%>'></div>  
  4.                     <div id='modalMsg-<%# Eval("FriendID")%>' class="HideModal">  
  5.   
  6.                         <div class="popupbox">  
  7.                             <br />  
  8.                             <div class="popupttl bluetxt"><b>Delete Confirmation</b></div>  
  9.                             <hr />  
  10.                             <br />  
  11.                             <br />  
  12.                             <div class="popupdesc">  
  13.                                 <!-- START POPUP BLOCK -->  
  14.                                 <div class="popblock">  
  15.                                     <div class="poptxt ibvm">  
  16.                                         Are you sure you want to delete?  
  17.                                     </div>  
  18.                                 </div>  
  19.                                 <!-- END POPUP BLOCK -->  
  20.                                 <!-- START POPUP BLOCK -->  
  21.                                 <br />  
  22.                                 <div class="popblock popblocksubbtn">  
  23. <asp:Button ID="btnDelete" runat="server" Text="Yes" CausesValidation="False" CommandName="DeleteItem" />  
  24. <input type="submit" value="No" class="button bluebg ibvm" onclick="RemoveModal('<%# Eval("FriendID")%>')" />  
  25. <asp:Button ID="btnHide" runat="server" Text="Back" Style="display: none" />  
  26.                                 </div>  
  27.                                 <!-- END POPUP BLOCK -->  
  28.                             </div>  
  29.                         </div>  
  30.                     </div>  
  31.   
  32. <%--End of Delete Modal Poup--%>  
CSS (StyleSheet Code)
  1.     <style>  
  2. //OverlayEffect class which hide the background (main window).  
  3.         .OverlayEffect {  
  4.             background-color: black;  
  5.             filter: alpha(opacity=70);  
  6.             opacity: 0.7;  
  7.             width: 100%;  
  8.             height: 100%;  
  9.             z-index: 400;  
  10.             position: absolute;  
  11.             top: 0;  
  12.             left: 0;  
  13.         }  
  14.   
  15. //To hide the modal on click on any button.  
  16.         .HideModal {  
  17.             display: none;  
  18.         }  
  19.   
  20.         .modalPopup {  
  21.             z-index: 1 !important;  
  22.         }  
  23.   
  24. //To display modal popup.  
  25.         .ShowModal {  
  26.             top: 200px;  
  27.             z-index: 1000;  
  28.             position: absolute;  
  29.             background-color: lightblue;  
  30.             text-align: center;  
  31.             width: 300px;  
  32.             height: 200px;  
  33.         }  
  34.     </style>  
JavaScript
  1. <script type="text/javascript">  
  2. t the class from DIV for activate a Modal.  
  3.  function DisplayModal(id) {  
  4.         document.getElementById("overlay-" + id).style.height = document.body.clientHeight + 'px';  
  5.         document.getElementById("overlay-" + id).className = "OverlayEffect";  
  6.         document.getElementById("modalMsg-" + id).className = "ShowModal";  
  7.     }  
  8.   
  9.   
  10. move the class from DIV for disable Modal.  
  11.     function RemoveModal(id) {  
  12.         document.getElementById("overlay-" + id).style.height = "0px";  
  13.         document.getElementById("overlay-" + id).className = "";  
  14.         document.getElementById("modalMsg-" + id).className = "HideModal";  
  15.     }  
  16. </script>   
Step by Step implementation of HTML, CSS, and JavaScript based Modal Popup

Create an ASP.NET Empty Web Site project, named as “RepeaterModalPopup”.



To "Add" a new web form, right click on Solution Explorer or project and click on Add ---> Add new item option.



Set Web form file : Default.aspx

Drag and drop the Repeater control on the page.



Note - For data fetching, we have used the classic ADO.NET code that is SQL DataAdapter, DataSet, and assigned to repeater.

We have created a BindRepeater method that delivers the data to Repeater control.
  1. private void BindRepeater()  
  2.   {  
  3.       string constr = ConfigurationManager.ConnectionStrings["ModalConnectionString"].ConnectionString;  
  4.       SqlConnection _con = new SqlConnection(constr);  
  5.       SqlDataAdapter da = new SqlDataAdapter("Select * From tblFriends", _con);  
  6.       DataSet ds = new DataSet();  
  7.       da.Fill(ds);  
  8.       rptFriends.DataSource = ds.Tables[0];  
  9.       rptFriends.DataBind();  
  10.         
  11.   }  
Default.aspx page code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script type="text/javascript">  
  9.         function DisplayModal(id) {  
  10.             document.getElementById("overlay-" + id).style.height = document.body.clientHeight + 'px';  
  11.             document.getElementById("overlay-" + id).className = "OverlayEffect";  
  12.             document.getElementById("modalMsg-" + id).className = "ShowModal";  
  13.         }  
  14.   
  15.         function RemoveModal(id) {  
  16.             document.getElementById("overlay-" + id).style.height = "0px";  
  17.             document.getElementById("overlay-" + id).className = "";  
  18.             document.getElementById("modalMsg-" + id).className = "HideModal";  
  19.         }  
  20.     </script>  
  21.   
  22.     <style>  
  23.         .OverlayEffect {  
  24.             background-color: black;  
  25.             filter: alpha(opacity=70);  
  26.             opacity: 0.7;  
  27.             width: 100%;  
  28.             height: 100%;  
  29.             z-index: 400;  
  30.             position: absolute;  
  31.             top: 0;  
  32.             left: 0;  
  33.         }  
  34.   
  35.         .HideModal {  
  36.             display: none;  
  37.         }  
  38.   
  39.         .modalPopup {  
  40.             z-index: 1 !important;  
  41.         }  
  42.   
  43.         .ShowModal {  
  44.             top: 200px;  
  45.             z-index: 1000;  
  46.             position: absolute;  
  47.             background-color: lightblue;  
  48.             text-align: center;  
  49.             width: 300px;  
  50.             height: 200px;  
  51.         }  
  52.     </style>  
  53. </head>  
  54. <body>  
  55.     <form id="form1" runat="server">  
  56.         <div>  
  57.   
  58.             <asp:Repeater ID="rptFriends" runat="server">  
  59.                 <ItemTemplate>  
  60.                     <table>  
  61.                         <tr>  
  62.                             <td>Name  
  63.                             </td>  
  64.                             <td>  
  65.                                 <%# Eval("Name") %>  
  66.                             </td>  
  67.                         </tr>  
  68.                         <tr>  
  69.                             <td>Place  
  70.                             </td>  
  71.                             <td>  
  72.                                 <%# Eval("Place") %>  
  73.                             </td>  
  74.                         </tr>  
  75.                         <tr>  
  76.                             <td>Mobile  
  77.                             </td>  
  78.                             <td>  
  79.                                 <%# Eval("Mobile") %>  
  80.                             </td>  
  81.                         </tr>  
  82.                         <tr>  
  83.                             <td rowspan="2">  
  84.                                 <input id="btnDeleteClient" type="button" value="Delete" onclick="DisplayModal('<%# Eval("FriendID")%>    ')" />  
  85.                             </td>  
  86.   
  87.                         </tr>  
  88.                     </table>  
  89.                     <%--Start Delete Modal Popup--%>  
  90.   
  91.                     <div id='overlay-<%# Eval("FriendID")%>'></div>  
  92.                     <div id='modalMsg-<%# Eval("FriendID")%>' class="HideModal">  
  93.   
  94.                         <div class="popupbox">  
  95.                             <br />  
  96.                             <div class="popupttl bluetxt"><b>Delete Confirmation</b></div>  
  97.                             <hr />  
  98.                             <br />  
  99.                             <br />  
  100.                             <div class="popupdesc">  
  101.                                 <!-- START POPUP BLOCK -->  
  102.                                 <div class="popblock">  
  103.                                     <div class="poptxt ibvm">  
  104.                                         Are you sure you want to delete?  
  105.                                     </div>  
  106.                                 </div>  
  107.                                 <!-- END POPUP BLOCK -->  
  108.                                 <!-- START POPUP BLOCK -->  
  109.                                 <br />  
  110.                                 <div class="popblock popblocksubbtn">  
  111.                                     <asp:Button ID="btnDelete" runat="server" Text="Yes" CausesValidation="False" CommandName="DeleteItem" />  
  112.                                     <input type="submit" value="No" class="button bluebg ibvm" onclick="RemoveModal('<%# Eval("FriendID")%>    ')" />  
  113.                                     <asp:Button ID="btnHide" runat="server" Text="Back" Style="display: none" />  
  114.                                 </div>  
  115.                                 <!-- END POPUP BLOCK -->  
  116.                             </div>  
  117.                         </div>  
  118.                     </div>  
  119.   
  120.                     <%--End of Delete Modal Poup--%>  
  121.                 </ItemTemplate>  
  122.                 <SeparatorTemplate>  
  123.                     <hr />  
  124.                 </SeparatorTemplate>  
  125.             </asp:Repeater>  
  126.   
  127.         </div>  
  128.     </form>  
  129. </body>  
  130. </html>  
Default.aspx.cs page code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Configuration;  
  4. using System.Data;  
  5. using System.Data.SqlClient;  
  6. using System.Linq;  
  7. using System.Web;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10.   
  11. public partial class _Default : System.Web.UI.Page  
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.   
  16.         BindRepeater();  
  17.     }  
  18.   
  19.     private void BindRepeater()  
  20.     {  
  21.         string constr = ConfigurationManager.ConnectionStrings["ModalConnectionString"].ConnectionString;  
  22.         SqlConnection _con = new SqlConnection(constr);  
  23.         SqlDataAdapter da = new SqlDataAdapter("Select * From tblFriends", _con);  
  24.         DataSet ds = new DataSet();  
  25.         da.Fill(ds);  
  26.         rptFriends.DataSource = ds.Tables[0];  
  27.         rptFriends.DataBind();  
  28.           
  29.     }  
  30.   
  31. }  
Output

By default, the page displays like the following.



On "Delete" button click, the "Delete Confirmation" modal popup will display.
 


Similar Articles