Resources » Code Snippets » jQuery

How to show simple popup window using jQuery


Updated: Category: jQuery
Author: Member Level: GoldPoints: 35


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:-

PopupWindow


Did you like this resource? Share it with your friends and show your love!

Responses to "How to show simple popup window using jQuery"
Author: Pritom Nandy  29 May 2013   Member Level: Gold   Points : 0
Thank you very much Boss. Started the journey in JQuery by your article.


Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index
    Subscribe to Subscribers
    Active Members
    Today
      Last 7 Daysmore...

      Awards & Gifts
      Talk to Webmaster Tony John
       
      Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India

      
      
      
      

      Click the "Follow" button above to follow Tony John