Steps for implementation of designed Jquery modal popup using Asp.net
Step 1: Add script to head section
<script src=”js/jquery-1.js” type=”text/javascript”></script>
<script src=”js/jquery.modaldialog.js” type=”text/javascript”></script>
<link href=”js/jquery.modeldialog.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
$(document).ready(function () {
temp = $(“.OpenPopup”).html();
$(“.OpenPopup”).html(“”);
$(“#clicker”).click(function () {
$.modaldialog.success(temp, {
title: ‘Add User’,// Add name for title in popup
width: 500,
heght: 200
});
});
});
function getResult() {
var txt = $(“input[id$=txtUserName]”).val();
alert(txt);
}
</script>
Step 2: Add design in form
<div class=”DivPos”>
<div id=”clicker” style=”cursor:pointer”>
Add New User</div>
<div class=”OpenPopup” style=”display:none;”>
<div id=”popup-wrapper”>
<table>
<tr style=”width: 123px;”>
<td>
<sup id=”Sup1″ runat=”server” style=”position: relative; color: Red; font-size: 14px; top: 3px;”>
<b>*</b></sup>
<asp:Label ID=”lblUserName” runat=”server” Text=”User Name” CssClass=”lblText”></asp:Label>
</td>
<td>
<asp:TextBox ID=”txtUserName” runat=”server” CssClass=”PopUpText”></asp:TextBox>
</td>
</tr>
<tr>
<td>
<sup id=”Sup2″ runat=”server” style=”position: relative; color: Red; font-size: 14px; top: 3px;”>
<b>*</b></sup>
<asp:Label ID=”lblEmail” runat=”server” Text=”Email” CssClass=”lblText”></asp:Label>
</td>
<td>
<asp:TextBox ID=”txtEmail” runat=”server” CssClass=”PopUpText”></asp:TextBox>
</td>
</tr>
<tr>
<td>
<sup id=”Sup3″ runat=”server” style=”position: relative; color: Red; font-size: 14px; top: 3px;”>
<b>*</b></sup>
<asp:Label ID=”lblDisplayName” runat=”server” Text=”Display Name” CssClass=”lblText”></asp:Label>
</td>
<td>
<asp:TextBox ID=”txtDisplayName” runat=”server” CssClass=”PopUpText”></asp:TextBox>
</td>
</tr>
<tr>
<td>
<sup id=”Sup4″ runat=”server” style=”position: relative; color: Red; font-size: 14px; top: 3px;”>
<b>*</b></sup>
<asp:Label ID=”lblFirstName” runat=”server” Text=”First Name” CssClass=”lblText”></asp:Label>
</td>
<td>
<asp:TextBox ID=”txtFirstName” runat=”server” CssClass=”PopUpText”></asp:TextBox>
</td>
</tr>
<tr>
<td>
<sup id=”Sup5″ runat=”server” style=”position: relative; color: Red; font-size: 14px; top: 3px;”>
<b>*</b></sup>
<asp:Label ID=”lblLastName” runat=”server” Text=”Last Name” CssClass=”lblText”></asp:Label>
</td>
<td>
<asp:TextBox ID=”txtLastName” runat=”server” CssClass=”PopUpText”></asp:TextBox>
</td>
</tr>
<tr>
<td colspan=”2″ valign=”middle”>
<%– <asp:Button ID=”btnSubmit” runat=”server” style=”margin-left: 116px; margin-top: 5px;” Text=”Submit” />–%>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
</div>
Step 3: Go to jquery.modaldialog.js to change the design of popup
a:
//Pass error,warning,success in option.type to get differen modal popups
options.type = “error”;
b:
//Perform actions on close button by making a functions on click event ex:<input type=’button’ id=’dialog-button’ value=’Close’ onclick=’return getResult()’>
Download Sample
