Cacher is the code snippet organizer for pro developers

<style>
.hide_sidebar .background{
    z-index: 1;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
}

.hide_sidebar .hide_inner{
    z-index: 2;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background: #fff;
    width: 470px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -470px;
    overflow-y: scroll;
    margin-right: -20px;
}
.hide_sidebar .wrap_sidebar{
    position: relative;
    height: 100%;
    overflow: hidden;
}
.hide_sidebar .hide_inner .caption{
    padding: 20px 30px;
    font-size: 21px;
    line-height: 21px;
    background-color: #fff;
    width: 455px;
    z-index: 2;
	text-transform:uppercase;
}
.red-line{
	border-bottom: 1px solid #e74c3c;
	padding: 10px 10px;
}	
.close{
	font-size: 20px;
}
</style>

<div class="hide_sidebar">
	<div class="background" style="">
	</div>
	<div class="hide_inner">
		<div class="wrap_sidebar">
			<div class="caption">
				<div class="red-line">
					Оставить отзыв
					<span class="icon-close close">&#10060;</span>
				</div>
			</div>
			<div class="row">
				<div class="large-12 column">
					<form action="obratnaya-svyaz" class="row" method="POST" id="side-obratka">
	<div class="medium-12 large-12 column">
		<label class="input-addon">Имя</label>
		<input class="input-with-addon" type="text" name="name" placeholder="Алексей" onfocus="this.placeholder=''" onblur="this.placeholder='Алексей'">
	</div>
	
		
	<div class="medium-12 large-12 column">
		<label class="input-addon">E-mail</label>
		<input class="input-with-addon" type="email" name="mail" placeholder="test@example.com" required="" onfocus="this.placeholder=''" onblur="this.placeholder='test@example.com'">
	</div>
	
	<div class="medium-12 large-12 column">
		<label class="input-addon">Ваш отзыв</label>
		<textarea class="input-with-addon" name="komment" rows="2" placeholder="Отзыв" onfocus="this.placeholder=''" onblur="this.placeholder='Хочу уточнить один момент...'"></textarea>
	</div>	
						<input type="hidden" name="otz" value="Отзыв">
	<input class="button right" type="submit" style="margin-right:0.9375rem;" value="Оставить отзыв">
</form>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
jQuery(document).ready(function($) {
	$('.otz-btn').click(function() {
		 $('.hide_sidebar .background').show()
         $('.hide_sidebar .hide_inner').css('right', '0')
	});
	$('.hide_sidebar .background').hide();

		$('.hide_sidebar .close').click(function(){
			setTimeout(function(){$('.hide_sidebar .background').hide()},1000) 
			$('.hide_sidebar .hide_inner').css('right', '-470px')
		})
});
	
	$(window).load(function(){
		var form = $('#side-obratka');
		form.submit(function(){
			var button = form.find('input[type="submit"]');
			var data = form.serialize();
			var type = this.method;
			var action = this.action;
			button.attr('disabled', 'disabled');
			$.ajax({
				url: action,
				data: data,
				type: type,
				success:function(data){
					$('.hide_sidebar .background').hide();
					$('.hide_sidebar .hide_inner').css('right', '-470px');
					swal({   title: "Спасибо за отзыв",   text: "Мы опубликуем его после модерации",   imageUrl: "/assets/templates/main/img/thumbs-up.jpg" });
				},
				complete: function(){
					button.removeAttr('disabled');
				}
			});
			return false;
		});
	});

	
</script>