form add block
HTML
<table width="100%">
<tr>
<td bgcolor="#ccc" width="200">
left sidebat
</td>
<td bgcolor="#eee">
<div class="content">
<div class="content-inner">
<a id="profile-add-item" href="#">Добавить</a>
</div>
<div class="form_wrap">
<form>
<a id="#profile_add-close" href="#">close</a>
<label for=""></label>
<input type="text">
text<br>
text<br>
text<br>
text<br>
text.
</form>
</div>
</div>
</td>
</tr>
</table>
CSS
.content {
border: 1px solid #000;
padding: 25px;
position: relative;
}
.content:after {
content: "";
display: block;
clear: both;
}
.content-inner {
float: left;
}
.form_wrap {
display: none;
margin: 0;
background: #e1e1e1;
padding: 25px;
top: 0;
left: 0;
position: relative;
}
.form_wrap.active {
display: block;
}
JavaScript
$('#profile-add-item').click(function(e) {
$('.form_wrap').addClass('active');
e.preventDefault();
});
$('#profile_add-close').click(function(e) {
$('.form_wrap').removeClass('active');
e.preventDefault();
});