How to Create Popup Box using Javascript Onclick function.

In this live Tutorial, We are explaining how to make pop-up or how to show information in pop-up box.
for making this pop-up we required some language help like HTML, CSS and JavaScript function and syntax.

 Its all easy and have to use within a page where we have to show that pop-up. Here we are showing one pop-up for sing up of user from the front page of website.

header.php: - In the header bar use the following code using HTML.
In the Menu Bar: -

Home |
Login |
 Signup |
For Companies

In this HTML line we are using one JavaScript function that will generate the pop-up box. we have to write same exactly it is showing.
Now open the head section in of your page. and write the java script code where all your JavaScript code is written.
In Head Section: -

After that use the following popup box and put it on the page where you have to show the pop-up. or you can also write this code on page that is included on all pages like header.php page. In this code whole sign up form is written below: -
In the <IMG> tag we are using one close image. Onclick on this image we can close the pop-up if we don't need it.

    
    

    

        

            

            

           
            
Please Sign Up
                

                      

                        
First Name :
                        
 
                        

                      
                      

                        
Last Name :
                        
 
                        

                      
                      

                        
Email:
                        
 
                        

                      
                      

                        
Password :
                        
 
                        

                      
                      

                        
Confirm Password :
                        
 
                        

                      
                       

                        
 
                        
 
                        

                      
                    

                
            
    
  
 

Now we Require the CSS part of this form. Keep this CSS into your main CSS file and like it to your page where you have to show pop-up window.

.over_cover {background-color:red;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";filter: alpha(opacity=35);-khtml-opacity: 0.35;-moz-opacity: 0.35;opacity: 0.35;position:fixed;z-index:15;top:0px;left:0px;width:100%;height:100%;display:none;cursor:wait;}
.pop_box_conn{display:none ; z-index:200000000; position:fixed; top:0; left:0;top: 50%;left: 50%;margin-top: -225px; margin-left: -315px;}
.wrapp_pop{ padding:10px; background-color:#F93; overflow:hidden;}
tr td {font-family:futura; font-size:16px;}

Now Cheers for your POPUP Box.
Feel free and Don't forget to give feedback. keep visiting.

You Might Also Read : -

• How to Send Bulk Emails in java Technology.
• How to Check all Checkboxes by clicking one checkbox.
• How to Completely Disable cache for PHP project.
• How to Send data using Ajax and JavaScript into database.
• Dynamically Add Input fields into the form using JQuery.
• Magento Issues While Installing a New Installation or Theme.