Cacher is the code snippet organizer for pro developers

.modal-layer
	.modal-filter
	.modal-wrap
		.modal(data-modal="order")
			.modal-content
				.modal-close
					+icon("close","icon")
				.modal-title Оставьте заявку
				.modal-text Обращаетесь к нам впервые? <br> Оформите обращение с помощью этой формы, мы перезвоним Вам и проконсультируем по любому Вашему вопросу совершенно бесплатно!
				form.validate-form( action="javascript:void(null);")
					.input-row
						input(type="text" name="name" placeholder="Ваше имя").input
					.input-row
						input(type="text" name="phone" placeholder="Ваш телефон").input
					.input-row
						textarea(name="info", cols="30", rows="5" placeholder="Сообщение").input
					.agree-row
						.check-el
							label.style-label.style-label--checkbox
								input(type="checkbox" name="agree").sytle-input
								.sytle-input-element
									+icon("checked","icon-check")
								.sytle-input-text=text
						.agree-row__text Согласен с
							a(href="#") условиями обработки персональных данных
					input(type="submit" value="Отправить заявку").modal-send
		//success message
		.modal(data-modal="true")
			.modal-content.modal-content--true
				.modal-close
					+icon("close-fat","icon")
				+icon("check-round","icon icon-msg")
				.modal-text-true Сообщение отправленно

a(href="#" data-modal="order").modal-get Открыть модальное окно

// modal
.modal-layer
	width: 100%
	//height: 100vh
	position: fixed
	z-index 1000
	top 0
	left 0
	visibility: hidden
	transition all 1s // duration for fade
	opacity 0

.modal-layer-show
	visibility: visible
	opacity 1

.modal-cont
	width: 100%
	height: 100%
	position: relative
	max-height 100%
	overflow: auto

.modal-filter
	position: absolute
	top: 0
	left: 0
	background: #18191da1
	width: 100%
	height: 100vh
	min-height 100vh

.modal
	+below(768px)
		width: 100%
		box-shadow 0 0 0
	transform scale(.9)
	position: absolute
	opacity 0
	transition transform .6s, opacity .8s
	max-width 420px
	z-index -1
	left -9999px
	.order__row
		margin-bottom: 20px
		border-bottom 0

.modal-content
	+below(640px)
		height: 100%
		padding: 30px 20px
		//overflow-y scroll
		width: calc(100% - 40px)
	margin: 20px auto
	background: white
	position: relative
	padding: 40px
	br(25px)

.modal__show
	opacity 1
	transform scale(1)
	position: relative
	z-index 1000
	left initial
	transition transform .6s, opacity .8s
	margin auto
	
.modal-close
	+below(768px)
		top 12px
		right 12px
	position: absolute
	top: 20px
	right: 20px
	cp()
	size 50px
	br(20px)
	flex(mid)
	z-index 10
	background: #f8f8f8
	&:hover
		.icon
			opacity: 1
	.icon
		tr()
		size 12px
		fill black
		opacity:.3

.modal-hide-animation
	transform scale(.9)
	opacity 0
	transition transform .6s, opacity .8s
.modal-open
	overflow: hidden
	overflow-y: scroll
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	width: 100%

.modal-wrap
	position: fixed
	width: 100%
	height: 100%
	overflow-y auto
	flex(mid)

.modal-title
	+below(768px)
		font-size: 20px
	margin-bottom: 20px
	text-align: center
	@extend .type--xl
	font-weight: 700

.modal-text
	+below(768px)
		width: 100%
		font-size: 12px
	text-align: center
	margin: 20px auto
	//width: 80%
	line-height: 1.6


.modal-send
	@extend .btn--md
	@extend .btn--mark
	width: 100%
// modal === end

//bower i jquery-validation --save-dev  - install validate
//closeModal() - закрыть окна
//initModal('data-name-attr') - Открыть нужное окно

// set height modal
//Решение бага с высотой во весь экран на моб
var vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

//css -> 
// .el
//		height calc(var(--vh) * 100)

// set height modal === end

//modals
	var modalState = {
		"isModalShow": false, //state show modal
		"scrollPos": 0
	};
	var scrollWidth= window.innerWidth - $(document).width();
	var openModal = function () {
		if (!$('.modal-layer').hasClass('modal-layer-show')) {
			$('.modal-layer').addClass('modal-layer-show');
			modalState.scrollPos = $(window).scrollTop();
			$('body').css({
				overflowY: 'hidden',
				top: -modalState.scrollPos,
				width: '100%',
				paddingRight:scrollWidth
			});

		}
		modalState.isModalShow = true;
	};

	var closeModal = function () {
		$('.modal-layer').removeClass('modal-layer-show');
		$('body').css({
			overflow: '',
			position: '',
			top: modalState.scrollPos,
			paddingRight:0
		});
		$(window).scrollTop(modalState.scrollPos);
		$('.modal').addClass('modal-hide-animation');
		setTimeout(function(){
			$('.modal').removeClass('modal-hide-animation');
			$('.modal').removeClass('modal__show');
		},600);
		modalState.isModalShow = false;
	};

	var initModal = function (el) {
		openModal();

		$('.modal').each(function () {
			if ($(this).data('modal') === el) {
				$(this).addClass('modal__show')
			} else {
				$(this).removeClass('modal__show')
			}
		});
		var modalHeightCont = $(window).height();
		$('.modal-filter').height(modalHeightCont);

	};

	$('.modal-get').click(function () {
		var currentModal = $(this).data("modal");
		initModal(currentModal);
	});

	$('.modal-close, .modal-hide').click(function () {
		closeModal();
	});
	//modals===end

//validate
jQuery.validator.addMethod("getPhone", function(value, element) {
  // allow any non-whitespace characters as the host part
  return this.optional( element ) || /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){5,18}(\s*)?$/.test( value );
	}, 'Введите правильный номер телефона');
$('.validate-form').each(function () {
	var curentForm = $(this);
	$(this).validate({
		highlight: function (element) { //даем родителю класс если есть ошибка
			$(element).parent().addClass("field-error");
		},
		unhighlight: function (element) {
			$(element).parent().removeClass("field-error");
		},
		rules: { //правила для полей
			name: {
				required: true,
			},
			phone: {
				required: true,
				minlength: 5,
				getPhone: true
			},
			comment: {
				required: true,
				minlength: 5,
			},
			agree: {
				required: true
			}
		},
		messages: {
			name: {
				required: 'Обязательное поле',
			},
			phone: {
				required: 'Обязательное поле',
				number: 'Введите правильный номер',
				minlength: 'Номер должен быть длиннее',
			},
			comment: {
				required: 'Обязательное поле',
				minlength: 'Сообщение должно быть длиннее',
			},
			agree: {
				required: false,
			}
		},
		submitHandler: function (form) {
			$.ajax({ //отправка ajax
				type: "POST",
				url: "sender.php",
				data: $(form).serialize(),
				timeout: 3000,
			});
			closeModal();
			initModal("truemessage");
			setTimeout(function () {
				closeModal();
				$(':input', '.validate-form') //очитска формы от данных
					.not(':button, :submit, :reset, :hidden')
					.val('')
					.removeAttr('checked')
					.removeAttr('selected')
			}, 2500)

		}
	});
});