Steps for making Jquery modal popup in Asp.net
Step 1: Add design to form
<div id=”clicker”>
Click Me!
</div>
<div id=”popup-wrapper”>
Add New User
<a href=”#” id=”close-btn” style=”float:right”>X</a>
<br />
<br />
<table>
<tr style=”width: 123px;”>
<td>
<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>
<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>
<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>
<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>
<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>
Step 2: Add Script to Page
<script type=”text/javascript”>
$(function () {
$(‘#popup-wrapper’).modalPopLite({ openButton: ‘#clicker’, closeButton: ‘#close-btn’, isModal: true });
});
</script>
Step 3 : Add Style to Page
<style type=”text/css”>
/* CSS Reset */
#clicker
{
font-size:20px;
cursor:pointer;
}
#popup-wrapper
{
width:289px;/*Width for popup window*/
height:250px;/*Height for popup window*/
background-color:#ccc;
padding:10px;
}
body
{
padding:10px;
}
</style>
Step 3 : Add Links on Head of Page
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>
<script src=”modalPopLite.min.js” type=”text/javascript”></script>
<link href=”Modal.css” rel=”stylesheet” type=”text/css” />
Download:
Jquery Modal Popup