Try the below. If it's close to what you require you can then improve by making the background have an opacity etc.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
width:100%;
height:100px;
float:left;
}
#menu {
width:100%;
float:left;
}
#content {
width:100%;
float:left;
}
#content #left {
width:80%;
float:left;
}
#content #right{
width:19%;
float: right;
}
</style>
<style>
#formBox{
position:fixed;
top:-400px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:1px solid #ccc;
z-index:101;
}
#name, #email {
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#showForm').click(function(){
$('body').css('background-color' , '#000');
$('#formBox').animate({'top':'160px'},500);
});
});
</script>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="left"></div>
<div id="right"><img src="img1" alt=""/><a href="#" id="showForm">Show Form</a></div>
</div>
<div id="footer"></div>
<!-- formBox -->
<div id="formBox">
<form id="myForm" method="post" action="form_box.html">
<p>
<label for="name">Name<br>
<input type="text" name="name" id="name">
</label>
</p>
<p>
<label for="email">Email<br>
<input type="text" name="email" id="email">
</label>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
</body>
</html>