Форма выпадает

by pleymo

HTML

<a href="javascript:void(0);" class="click">click me</a>

		<div class="overlay"></div>
		<div class="order">
			<span class="close"></span>
			<fieldset>
				<legend>Оформление заказа</legend>
				<form id="form" method="post" action="">
				<label class="sure">Все поля обязательны к заполнению *</label>
				<label>
					<span>ФИО</span>
					<input class="fio" type="text" name="fio" value="">
				</label>
				<label>
					<span>Телефон</span>
					<input class="phone" type="text" name="phone" value="">
				</label>
				<label>
					<span>Email</span>
					<input class="email" type="text" name="email" value="">
				</label>
				<label>
					<span>Адрес доставки</span>
					<textarea class="address" rows="5" cols="30" name="address"></textarea>
				</label>
				<label>
					<span>Курьер, или самовывоз?</span>
					<select name="order_delivery">
						<option value="courier">Курьер</option>
						<option value="pickup">Самовывоз</option>
					</select>
				<label>
					<input class="submit_order" type="submit" name="order_submit" value="">
				</label>
				</form>
			</fieldset>
		</div>

CSS

.overlay {
	display: none;
	position: fixed;http://jsfiddle.net/pleymo/FW2wB/1/#username
	z-index: 999;
	opacity: 0.5;
	filter: alpha(opacity=50);
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: #000;
}
.order {
	display: none;
	position: fixed;
	border: 3px solid #999;
	background: #fff;
	width: 300px;
	height: auto;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -200px;
	z-index: 1000;
	border-radius: 10px;
	padding: 30px;
}
.order .submit_order {
	width: 190px;
	height: 40px;
	margin: 2px 0;
}
.close {
	background: url(http://angrybubbles.ru/images/del.png) no-repeat;
	width: 20px;
	height: 20px;
	display: block;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}
.order fieldset {
	border: #999999 solid 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
}
.order legend {
	color: red;
	font: normal 14px Arial;
}
.order label {
	width: auto;
	float: left;
}
.order label span {
	display: block;
	color: #252525;
	font: normal 12px Arial;
}
.order label.sure {
	color: #e01616;
	font: normal 12px Arial;
	padding: 5px 0;
}

JavaScript

$(document).ready(function() {
	
    $("body").on("click", ".click", function() {
		$('.overlay').show(1000);
		$('.order').show(1000);
		$('.close').click(function() {
			$('.overlay, .order').hide(1000);
		});
	});
	
});