Description:
Welcome to Jqueryjohn.com.
In this article, I will explain how to create simple popup box without any plugin using Jquery and CSS.
In the previous article, I have used window.open()
and window.ShowModalDialog() method for creating popup window.
There are lot of Popup plugins are
available. I don’t think that a jquery plugin is required for this. We can
easily achieve with simple javascript code and css.
We can simply create popup box using fadeIn
() and fadeOut () method.
To open popup window at the center of the
screen, use the following CSS property.
left: 35%;
top: 35%;
position: fixed;
Adjust the top and left property
based on your popup div width to make it center of the screen.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style
type="text/css">
#PopupPage
{
border:
3px solid #ccc;
left:
35%;
top:
35%;
position:
fixed;
width:
235px;
}
</style>
<script
type="text/javascript">
$(document).ready(function () {
$('#PopupPage').fadeOut();
$('#btnPopup').click(function () {
$('#ParentPage').fadeOut(1000);
$('#PopupPage').fadeIn(1000);
return
false;
});
$('#btnCancel').click(function () {
$('#PopupPage').fadeOut(1000);
$('#ParentPage').fadeIn(1000);
return
false;
});
$('#btnLogin').click(function () {
alert("Welcome");
$('#ParentPage').fadeOut(1000);
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="ParentPage">
<asp:Button ID="btnPopup" runat="server" Text="Open Popup" />
</div>
<div
id="PopupPage"
style="display: none;">
<table>
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="UserName"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnLogin" runat="server" Text="Login" />
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Creating jquery popup div, open popup
window using Jquery, Using Jquery to open a Popup window, Popup div using
Jquery, Open Jquery Popup window
0 comments:
Post a Comment