Resources » Code Snippets » jQuery

How to show simple popup window using jQuery


Posted Date: 22-Jun-2012  Last Updated:   Category: jQuery    
Author: Member Level: Gold    Points: 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

Attachments


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 2013Member 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
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India