How to show simple popup window using jQuery Samples and examples

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

Online Members

How to show simple popup window using jQuery

Full Code

Post Comment:

Email subscription