How to show simple popup window using jQuery
In this article I have explained about how to show simple Popup window using jQuery. Each steps I have clearly explained in this article .
Introduction:
In this article I have explained about how to show simple Popup window using jQuery. Each steps I have clearly explained in this article .
The jQuery java script file can be downloaded from jQuery Official website http://www.jquery.com/
To load JQuery in your application Just copy and past below line titile tag
<script type="text/javascript" src="jquery-1.2.6.js"> </script>
Just copy and paste below code after import jquery
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style> Full Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Popup Window using JQuery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
ShowPopupBox();
$('#btnClose').click( function() {
HidePopupBox();
});
$('#MainPage').click( function() {
HidePopupBox();
});
function HidePopupBox() { // TO Hide PopupBox
$('#PopupDiv').fadeOut("slow");
$("#MainPage").css({ // this is just for style
"opacity": "1"
});
}
function ShowPopupBox() { // To Show PopupBox
$('#PopupDiv').fadeIn("slow");
$("#MainPage").css({ // this is just for style
"opacity": "0.3"
});
}
});
</script>
</head>
<body >
<form id="theform" runat="server">
<div id="PopupDiv" style="left: 232px; top: 179px; width: 265px; height: 96px;"> <!-- OUR PopupBox DIV-->
<table>
<tr>
<td style="width: 100px">
User Name</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
Password</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="btnSave" runat="server" Text="Save" /></td>
</tr>
</table>
<a id="btnClose">Close</a>
</div>
</form>
</body>
</html>
Output:-
Thank you very much Boss. Started the journey in JQuery by your article.