form add block

by Vladislav Altyncev

HTML

<table width="100%">
    <tr>
        <td bgcolor="#ccc" width="200">
            left sidebat
        </td>
        <td bgcolor="#eee">
            <div class="content">
                <a id="profile-add-item" href="#">Добавить</a>
                
                <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;
}
.form_wrap {
    display: none;
    margin: 0;
    background: #e1e1e1;
    padding: 25px;
    #position: absolute;
    top: 0;
    left: 0;
}
.form_wrap.active {
    display: block;
}

JavaScript

$('#profile-add-item').click(function(e) {
		$('.form_wrap').addClass('active');
        $('#profile-add-item').css({'display':'none'});
		e.preventDefault();
	});

	$('#profile_add-close').click(function(e) {
		$('.form_wrap').removeClass('active');
        $('#profile-add-item').css({'display':'block'});
		e.preventDefault();
	});