Jquery Modal PopUp in Asp.net

Category: ASP.NETJQUERY Comments: No comments

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”>Jquery Popup
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

Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.