<!-- Html -->

<div class="popup-modal">
	<div class="popup-window">
		<form id="order-popup" class="form-order-popup" method="POST">
			<div class="popup-close"></div>
			<input type="text" name="name" placeholder="Ваше имя" required>
			<input type="text" name="phone" placeholder="Ваш телефон" required>
			<input class='popup-button' type="submit" value="Оставить заявку">
		</form>
	</div>
</div>

<!-- Scss -->

.popup-modal {
	z-index: 100;
	display: none;
	background-color: rgba(0,0,0, .5);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.popup-window {
		margin: 0 auto;
		margin-top: 100px;
		background-color: #fff;
		width: 320px;
		min-height: 260px;

	}

	.form-order-popup {
		padding-top: 1px;
		position: relative;
		.popup-close {
			content: '';
			position: absolute;
			top: 10px;
			right: 10px;
			background-image: url(../img/close.svg);
			width: 20px;
			height: 20px;
			background-repeat: no-repeat;
			background-size: cover;
			cursor: pointer;
		}
		input {
			margin: 0 auto;
			width: 200px;
			display: block;
			margin-top: 40px;
			padding-left: 10px;
			height: 32px;
			font-size: 16px;
		}
		.popup-button {
			height: 36px;
			color: #fff;
			font-weight: bold;
			background-color: $accent;
			cursor: pointer;
		  text-transform: uppercase;
		  border: none;
			transition: background-color,color .3s ease;
			&:hover {
				color: #fff;
				background-color: #efaf00;
			}

		}
	}
}

<!-- Js -->

$('.popup-button').click(function(event) {
	$('.popup-modal').show("slow");
});

$('.popup-close').click(function(event) {
	$(".popup-modal").hide('slow');
});