Modals for Authorization

PHP

<!-- Modal Buttons -->
<a href="#" class="button" data-modals="modal_login">Modal Login</a>
<a href="#" class="button" data-modals="modal_forgot_password">Modal Forgot Password</a>

<!-- modal_login -->
<div class="account_modal_wrap">
	<div class="image_wrap">
		<?= svg('iconLogin2','zoomIn') ?>
	</div>
	
	<div class="modal_text">
		<h3 class="modal_title">Account</h3>
		<p>Please enter your e-mail address and password</p>
	</div>
	
	<form action="" method="POST" class="authorize_form || validate_form" autocomplete="off" novalidate>
		<div class="authorize_form_inputs">
			<div class="form_item">
				<label class="label_input_icon">
					<input type="email" name="email" placeholder="E-mail" class="input || validate_email" autocomplete="off">
					<?= svg('iconChat2','') ?>
				</label>
			</div>
			
			<div class="form_item">
				<label class="label_input_icon">
					<input type="password" name="password" placeholder="Password" class="input || validate_pass" autocomplete="off">
					<?= svg('iconLock2','') ?>
				</label>
			</div>
			
			<input type="checkbox" name="remember" id="loginRemember" class="custom_checkbox">
			<label for="loginRemember">
					<span class="checkbox_design">
						<?= svg('iconCheckbox','') ?>
					</span>
				<span class="checkbox_text">Remember me</span>
			</label>
		</div>
		
		<button type="submit" class="button || button_block">Login</button>
		
		<div class="lines_text">
			<p>OR</p>
		</div>
		
		<a href="#" class="button || button_block">Create account</a>
	</form>
	<p class="link_text"><a href="#" data-modals="modal_forgot_password">Forgot your password?</a></p>
</div>

<!-- modal_forgot_password -->
<div class="account_modal_wrap">
	<div class="image_wrap">
		<?= svg('iconLockForgot','') ?>
	</div>
	
	<div class="modal_text || modal_text_wide">
		<h3 class="modal_title">Forget your password?</h3>
		<p>Don't worry, it happens to the best of us!</p>
		<p>Simply enter your e-mail address below and we'll send you recover link.</p>
	</div>
	
	<form action="" method="POST" class="authorize_form || validate_form" autocomplete="off" novalidate>
		<div class="form_item">
			<label class="label_input_icon">
				<input type="email" name="email" placeholder="E-mail" class="input || validate_email" autocomplete="off">
				<?= svg('iconChat2','') ?>
			</label>
		</div>
		
		<button type="submit" class="button || button_block">Send Recovery Link</button>
	</form>
	
	<p class="link_text"><a href="#" data-modals="modal_login">I remembered my password</a></p>
</div>

CSS

.account_modal_wrap .modal_text{margin:2rem 0 1.5rem}
.account_modal_wrap .modal_text p{max-width:23.5rem}
.account_modal_wrap .modal_text.modal_text_wide p{max-width:30rem}
.account_modal_wrap .authorize_form_inputs{margin:0 0 1.2rem}
.account_modal_wrap .custom_checkbox + label{margin:-.3rem 2rem 1rem 0}
.account_modal_wrap .lines_text{text-align:center;margin:1.5rem 0;position:relative}
.account_modal_wrap .lines_text::after{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;max-width:90%;height:.1rem;background-color:#cfcfcf;z-index:-1}
.account_modal_wrap .lines_text p{display:inline-block;font-size:1.4rem;font-weight:700;margin:0;background-color:#fff;padding:0 1.5rem}
.account_modal_wrap .link_text{text-align:center;margin:2rem 0 0}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.account_modal_wrap .link_text a:hover{color:#09a5be}
}
			
@media only screen and (max-width: 450px) {
	.account_modal_wrap .modal_text.modal_text_wide p{max-width: 18rem}
}

SCSS

/* Vars */
$main:            #09a5be;
$white:           #ffffff;

.account_modal_wrap {
	.modal_text {
		margin: 2rem 0 1.5rem;
		
		p {
			max-width: 23.5rem;
		}
		
		&.modal_text_wide {
			p {
				max-width: 30rem;
			}
		}
	}
	
	.authorize_form_inputs {
		margin: 0 0 1.2rem;
	}
	
	.custom_checkbox + label {
		margin: -0.3rem 2rem 1rem 0;
	}
	
	.lines_text {
		text-align: center;
		margin: 1.5rem 0;
		position: relative;
		
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			max-width: 90%;
			height: 0.1rem;
			background-color: #cfcfcf;
			z-index: -1;
		}
		
		p {
			display: inline-block;
			font-size: 1.4rem;
			font-weight: 700;
			margin: 0;
			background-color: $white;
			padding: 0 1.5rem;
		}
	}
	
	.link_text {
		text-align: center;
		margin: 2rem 0 0;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.account_modal_wrap .link_text a:hover{
		color: $main;
	}
}

@media only screen and (max-width: 450px) {
	.account_modal_wrap .modal_text.modal_text_wide p {
		max-width: 18rem;
	}
}

JavaScript

if (type == 'modal_login') {
	validate_form();
}

if (type == 'modal_forgot_password') {
	validate_form();
}