Fancybox Popup Signup Form ( jquery, css, html )

     <!-- Add Fancybox files -->
       jquery.fancybox.css
       jquery.fancybox.js

/* Some Styling */
  #popup-box {display:none; padding:0 20px; background-color:brown;} /* display:none; IMPORTANT */
  #popup-box form{padding:20px 0;margin:0;}
  #popup-box h3{text-align:center;color:#FFF;}
  #popup-box button{color:#FFF;background-color:#273896;border:0;padding:10px;margin:20px auto 0;width:100%;}
  #popup-box button:hover{color:#e35929;}
  #popup-box input{height:45px;width:450px;margin:5px 0 auto;display:block;padding:5px;border-color:#00008b;

  //initalize fancybox with:
  <script>
    $(document).ready(function() {
		$(".fancybox")
        .fancybox({
         padding: 0,
         width: 530
        });
	});

  </script>

<!-- Link Initializer -->
<a href="#popup-box" id="pop" class="fancybox" rel="group">Sign Up</a>

<!-- Put Form into page -->
  <div id="popup-box">
  <form>
    <h3>Sign Up To Our Newsletter </h3>
    <input type="email" id="email" name="email" placeholder="Enter Your Email">
    <button type="submit" value="submit" id="submit" value="submit">SUBMIT</button>
  </form>
</div>

Demo