ok so i have researched how to do popup forms on websites yet i have not found any help for my particular problem...basically on the front of my one page site i want the contact form to pop out onto the main page when a button at the bottom of the page is clicked. The code for everything is done i just need help with how to integrate a pop up command within my code for the contact form/main page.

This is such a simple concept yet i cannot understand how to get it to work for my situation.

If you need anymore input please let me know

This is the code for the main page

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>Example Ex</title>
        
        <link rel="stylesheet" type="text/css" href="styles.css" />
		<link rel="stylesheet" type="text/css" href="tab.css" />
		<link rel="stylesheet" type="text/css" href="style4.css" />
		

 
		
               
        <!--[if IE]>
        
        <style type="text/css">
        .clear {
          zoom: 1;
          display: block;
        }
        </style>

        
        <![endif]-->
        
    </head>
    
    <body>

    	<div class="section" id="page"> 
    
            <div class="header"> 

                <h1>Example example</h1>
                <h3>"Slogon goes here yay yay"</h3>
                 <h3 id="move">Follow Us!</h3>
                <div class="nav clear">
                   
					<ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                    </ul>
                </div>
            
            </div>
			
	
            
            <div class="section" id="articles"> <!-- A new section -->

				<!-- section 1 start -->

                
                
                <div class="article" id="article1"> 
                    <h2>Welcome</h2>
                    
                    <div class="line"></div>
                    
                    <div class="articleBody clear">
                    
                    	<div class="figure"> <!-- The figure tag marks data (usually an image) that is part of the area -->
	                    <div id="navigation-block">
							
								
								<ul id="sliding-navigation">
									<li class="sliding-element"><h3>Useful Tools for Your Computer</h3></li><br />
									<li class="sliding-element"><a href="http://download.cnet.com/AVG-Anti-Virus-Free-Edition-2012/3000-2239_4-10320142.html?tag=pop.software&cdlPid=10861654">AVG Download</a></li><br />
									<li class="sliding-element"><a href="http://www.update.microsoft.com/windowsupdate/v6/thanks.aspx?ln=en&&thankspage=5">Where to update your operating system</a></li><br />
									<li class="sliding-element"><a href="http://www.safer-networking.org/en/download/index.html">Spy bot destruction</a></li><br />
									<li class="sliding-element"><a href="http://www.zonealarm.com/">ZoneAlarm computer protection</a></li>
									
								</ul>
						</div>
							
                        </div>
                        
                        <h4 align="center">About Us</h4>
						<br />
						<p align="center" margin-left="30px">We specialize in computer tune-ups, maintenance, repairs and also installation of stereo systems.</p>
						<br />
						<br />
						<h4 align="center">Contact Info</h4>
						<br />
						
						<ul id="ul1">
                        <li>blah blah blah blah blah blah</li>
						<br />
						<li>Phone Number: (123) 456-7890</li>
						<br />
						<li>Email: exampleEmail@gmail.com</li>
						<br />
						</ul>
						
						<br />
						<br />
						<br />
						<br />
						<h4 id="mv">You can set up an appointment anytime from 11:00 am to 5:30 pm</h4>
						<br /> 
						<h4 id="mv2">Have a question or need to contact right away? Click here for our contact page</h4>
						<br />
						<br />
						<a class="a_demo_four" href="index2.html">Click Here!</a>
						<br />
						<br />
						<br />
						<br />
                    </div>
                </div>
                
				

				

        <div class="footer"> <!-- Marking the footer section -->

          <div class="line"></div>
           
           <p id="cp">Copyright 2012 - example.com</p> 
           
           <a href="#" class="up">Go UP</a>
           

        </div>
            
		</div> <!-- Closing the #page section -->
        
        <!-- JavaScript Includes -->
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
        <script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
    </body>
</html>


This is the code for the contact form

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<title>Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="formStyle.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    
		<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

		<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
		<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

		<script>
		$(document).ready(function() {
			
			
			
			// SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() }, 
			$("#form1").validationEngine({
				ajaxSubmit: true,
					ajaxSubmitFile: "ajaxSubmit.php",
					ajaxSubmitMessage: "Thank you, We will contact you soon !",
				success :  false,
				failure : function() {}
			})
			

		
		});
		</script>
        
        
</head>
<body>
<div id="wrapper">
  <div id="form-div">
  <h1>Send us a message!</h1>
    <form class="form" id="form1">
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="name"  />
        <label for="name">Name</label>
      </p>
      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] text-input" id="email"  />
        <label for="email">E-mail</label>
      </p>
      <p class="web">
        <select name="Subject">
					<option value="Question" selected="selected">Question</option>
					<option value="Comment">Comment</option>
					<option value="Set appointment" >Set Appointment</option>
		</select>
		<label for="subject">Subject</label>
      </p>
      <p class="text">
        <textarea name="text" class="validate[required,length[6,300]] text-input" id="comment"></textarea>
      </p>
      <p class="submit">
        <input type="submit" value="Send" />
      </p>
    </form>

  </div>
</body>
</html>