Components

Ajax Modals (based on SOW Ajax Modals)

Ajax : Centered
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_contact_md.html" 
	data-ajax-modal-size="modal-md" 
	data-ajax-modal-centered="true" 
	data-ajax-modal-callback-function=""
	class="js-ajax-modal btn btn-primary btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Centered
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body">
				
	<div class="accordion" id="accordionDropdownSignInUp">

		<!-- SIGN IN -->
		<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
			<div class="pt--0">

				<div class="form-label-group mb-4">
					<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
					<label for="signin_email">Email</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signin_password">Password</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign In
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
						Don't have an account yet?
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN IN -->

		<!-- SIGN UP -->
		<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
			<div class="pt--0">

				<h5 class="text-center pb-3 pt-3">Sign Up</h5>

				<div class="form-label-group mb-3">
					<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
					<label for="signup_name">Full Name</label>
				</div>

				<div class="form-label-group mb-3">
					<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
					<label for="signup_email">Email</label>
				</div>

				<div class="form-label-group mb-3">
					<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_1">Password</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_2">Password Again</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign Up
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
						Back to Sign In
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN UP -->


	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>

											

Ajax : Small
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_signin_sm.html" 
	data-ajax-modal-size="modal-sm" 
	data-ajax-modal-centered="false" 
	data-ajax-modal-callback-function=""
	data-ajax-modal-backdrop="" 
	class="js-ajax-modal btn btn-danger btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Small
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body">
				
	<div class="accordion" id="accordionDropdownSignInUp">

		<!-- SIGN IN -->
		<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
			<div class="pt--0">

				<div class="form-label-group mb-4">
					<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
					<label for="signin_email">Email</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signin_password">Password</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign In
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
						Don't have an account yet?
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN IN -->

		<!-- SIGN UP -->
		<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
			<div class="pt--0">

				<h5 class="text-center pb-3 pt-3">Sign Up</h5>

				<div class="form-label-group mb-3">
					<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
					<label for="signup_name">Full Name</label>
				</div>

				<div class="form-label-group mb-3">
					<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
					<label for="signup_email">Email</label>
				</div>

				<div class="form-label-group mb-3">
					<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_1">Password</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_2">Password Again</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign Up
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
						Back to Sign In
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN UP -->


	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>
											

Ajax : Medium
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_signin_md.html" 
	data-ajax-modal-size="modal-md" 
	data-ajax-modal-centered="false" 
	data-ajax-modal-callback-function=""
	data-ajax-modal-backdrop="" 
	class="js-ajax-modal btn btn-danger btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Medium
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body p--30">

	<div class="accordion" id="accordionDropdownSignInUp">


		<!-- SIGN IN -->
		<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
			<div class="p--30 pt--0">

				<div class="pb--30 pt--30">
					<img class="img-fluid" src="../demo.files/svg/content/undraw_mention_6k5d.svg" alt="...">
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
					<label for="signin_email">Email</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signin_password">Password</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign In
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
						Don't have an account yet?
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN IN -->

		<!-- SIGN UP -->
		<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
			<div class="p--30 pt--0">

				<h5 class="text-center pb-3 pt-3">Sign Up</h5>

				<div class="form-label-group mb-3">
					<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
					<label for="signup_name">Full Name</label>
				</div>

				<div class="form-label-group mb-3">
					<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
					<label for="signup_email">Email</label>
				</div>

				<div class="form-label-group mb-3">
					<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_1">Password</label>
				</div>

				<div class="form-label-group mb-4">
					<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
					<label for="signup_password_2">Password Again</label>
				</div>

				<button type="submit" class="btn btn-primary btn-soft btn-block">
					Sign Up
				</button>

				<div class="text-center mt--30">
					<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
						Back to Sign In
					</a>
				</div>

			</div>
		</form>
		<!-- /SIGN UP -->


	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom pl--30 pr--30 pt--20 pb--20">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>
											

Ajax : Large
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_signin_lg.html" 
	data-ajax-modal-size="modal-lg" 
	data-ajax-modal-centered="false" 
	data-ajax-modal-callback-function=""
	data-ajax-modal-backdrop="" 
	class="js-ajax-modal btn btn-danger btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Large
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body p--30">

	<div class="row">
		
		<div class="col-12 col-md-6">

			<div class="pb--30 pt--30">
				<img class="img-fluid" src="../demo.files/svg/content/undraw_mention_6k5d.svg" alt="...">
			</div>
		</div>

		<div class="col-12 col-md-6">

			<div class="accordion" id="accordionDropdownSignInUp">


				<!-- SIGN IN -->
				<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<div class="form-label-group mb-4">
							<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
							<label for="signin_email">Email</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signin_password">Password</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign In
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
								Don't have an account yet?
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN IN -->

				<!-- SIGN UP -->
				<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<h5 class="text-center pb-3 pt-3">Sign Up</h5>

						<div class="form-label-group mb-3">
							<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
							<label for="signup_name">Full Name</label>
						</div>

						<div class="form-label-group mb-3">
							<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
							<label for="signup_email">Email</label>
						</div>

						<div class="form-label-group mb-3">
							<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_1">Password</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_2">Password Again</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign Up
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
								Back to Sign In
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN UP -->


			</div>

		</div>

	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom pl--30 pr--30 pt--20 pb--20">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>
											

Ajax : Extra Large
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_signin_xl.html" 
	data-ajax-modal-size="modal-xl" 
	data-ajax-modal-centered="false" 
	data-ajax-modal-callback-function=""
	data-ajax-modal-backdrop="" 
	class="js-ajax-modal btn btn-danger btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Extra Large
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body p--30">

	<div class="row">
		
		<div class="col-12 col-md-12 col-lg-4">

			<div class="pb--30 pt--30">
				<img class="img-fluid" src="../demo.files/svg/content/undraw_mention_6k5d.svg" alt="...">
			</div>
		</div>

		<div class="col-12 col-md-12 col-lg-4">

			<div class="accordion" id="accordionDropdownSignInUp">


				<!-- SIGN IN -->
				<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<div class="form-label-group mb-4">
							<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
							<label for="signin_email">Email</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signin_password">Password</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign In
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
								Don't have an account yet?
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN IN -->

				<!-- SIGN UP -->
				<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<h5 class="text-center pb-3 pt-3">Sign Up</h5>

						<div class="form-label-group mb-3">
							<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
							<label for="signup_name">Full Name</label>
						</div>

						<div class="form-label-group mb-3">
							<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
							<label for="signup_email">Email</label>
						</div>

						<div class="form-label-group mb-3">
							<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_1">Password</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_2">Password Again</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign Up
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
								Back to Sign In
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN UP -->


			</div>

		</div>

		<div class="col-12 col-md-12 col-lg-4">

			<div class="p--30 pt--0">

				<h2 class="h4 text-muted mb-4">
					Why join us?
				</h2>

				<p>
					Smarty offers you a large variety of elements and predefined modern layouts.
				</p>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Flexible pricing
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Infinite possibilities
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Monthly free updates
					</p>

				</div>

			</div>

		</div>

	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom pl--30 pr--30 pt--20 pb--20">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>
											

Ajax : Full
Code

<!-- TRIGGER -->
<a 	href="#"
	data-href="_ajax/modal_signin_full.html" 
	data-ajax-modal-size="modal-full" 
	data-ajax-modal-centered="false" 
	data-ajax-modal-callback-function=""
	data-ajax-modal-backdrop="" 
	class="js-ajax-modal btn btn-danger btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : Full
</a>


<!-- AJAX CONTENT -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Sign In
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<div class="modal-body p--30">

	<div class="row">
		
		<div class="col-12 col-md-12 col-lg-4">

			<div class="accordion" id="accordionDropdownSignInUp">


				<!-- SIGN IN -->
				<form class="collapse bs-validate show" novalidate method="post" action="#" id="accordionDropdownSignInUpSignIn" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<div class="form-label-group mb-4">
							<input required placeholder="Email" id="signin_email" type="email" class="form-control form-control-clean">
							<label for="signin_email">Email</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password" id="signin_password" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signin_password">Password</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign In
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignUp" class="d-block text-success text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignUp">
								Don't have an account yet?
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN IN -->

				<!-- SIGN UP -->
				<form class="collapse bs-validate" novalidate method="post" action="#" id="accordionDropdownSignInUpSignUp" data-parent="#accordionDropdownSignInUp">
					<div class="p--30 pt--0">

						<h5 class="text-center pb-3 pt-3">Sign Up</h5>

						<div class="form-label-group mb-3">
							<input required id="signup_name" type="text" class="form-control form-control-clean" placeholder="Full Name">
							<label for="signup_name">Full Name</label>
						</div>

						<div class="form-label-group mb-3">
							<input required id="signup_email" type="email" class="form-control form-control-clean" placeholder="Email">
							<label for="signup_email">Email</label>
						</div>

						<div class="form-label-group mb-3">
							<input required placeholder="Password" id="signup_password_1" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_1">Password</label>
						</div>

						<div class="form-label-group mb-4">
							<input required placeholder="Password Again" id="signup_password_2" type="password" class="form-control form-control-clean" autocomplete="new-password">
							<label for="signup_password_2">Password Again</label>
						</div>

						<button type="submit" class="btn btn-primary btn-soft btn-block">
							Sign Up
						</button>

						<div class="text-center mt--30">
							<a href="#accordionDropdownSignInUpSignIn" class="d-block text-muted text-decoration-none" data-toggle="collapse" aria-expanded="true" aria-controls="accordionDropdownSignInUpSignIn">
								Back to Sign In
							</a>
						</div>

					</div>
				</form>
				<!-- /SIGN UP -->


			</div>

		</div>

		<div class="col-12 col-md-12 col-lg-3">

			<div class="p--30 pt--0">

				<h2 class="h4 text-muted mb-4">
					Why join us?
				</h2>

				<p>
					Smarty offers you a large variety of elements and predefined modern layouts.
				</p>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Flexible pricing
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Infinite possibilities
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Monthly free updates
					</p>

				</div>

			</div>

		</div>

		<div class="col-12 col-md-12 col-lg-5">

			<div class="transform-3d-right">
				<img class="max-w-400 shadow-xlg img-fluid rounded-xl" src="../demo.files/images/ps_smarty.jpg" width="570" height="357" alt="...">
			</div>

		</div>

	</div>

</div>

<div class="border-top text-muted p--15 fs--13 bg-light rounded-bottom pl--30 pr--30 pt--20 pb--20">
	<b>Privacy:</b> All data is secure, never transfered to a third party provider/service.
</div>
											
Ajax : With Callback

<a href="#"
	data-href="_ajax/modal-project-add.html" 
	data-ajax-modal-size="modal-md" 
	data-ajax-modal-centered="true" 
	data-ajax-modal-callback-function="my_modal_callback"
	class="js-ajax-modal btn btn-warning btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax : With Callback
</a>
<script>

	my_modal_callback = function(modal_id) {
		// #modal_id is the id created by ajax!
		// If needed: $('#modal_id')....
		$.SOW.core.toast.show('danger', '', 'Welcome', 'top-center', 4000, true);

	}

</script>
											

<!--
	
	Note: modal link can be used on both:
		href="url"
		data-href="url"
		If href is used, the plugin will replace it with data-href for safety (open in new tab)
			but search engines will se it as a regular link so to avoid this,
			data-href is recommended.


	


		
	data-ajax-modal-size="modal-sm" 
	data-ajax-modal-size="modal-md" 
	data-ajax-modal-size="modal-lg" 
	data-ajax-modal-size="modal-xl" 
	data-ajax-modal-size="modal-full" 

	data-ajax-modal-centered="true" 		centered modal
	data-ajax-modal-callback-function="" 		callback function if needed
	data-ajax-modal-backdrop="static" 		do not close on overlay click
	
	.js-ajax-modal 					required!

-->
<a href="#"
	data-href="_ajax/modal-project-add.html" 
	class="js-ajax-modal btn btn-danger mb-3">
		<i class="fi fi-heart-slim"></i>
	Ajax : Small
</a>
									

Modal Confirm (based on SOW Ajax Confirm)

Ajax : Confirm
Code

<a 	href="#"
	data-href="my-url.html?action=delete&item_id=1&confirm=true" 
	class="js-ajax-confirm btn btn-primary btn-soft"

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-callback-function=""
	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-method="GET" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-icon="fi fi-close"

	rel="nofollow">
		<i class="fi fi-shield-ok"></i>
		Ajax : Confirm
</a>
													

Ajax : Confirm : Invalid Url
Code

<a 	href="#"
	data-href="THIS-IS-AN-INVALID-URL" 
	class="js-ajax-confirm btn btn-danger btn-soft"

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-method="GET" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-icon="fi fi-close"

	rel="nofollow">
		<i class="fi fi-shield-ok"></i>
		Ajax : Confirm : Invalid Url
</a>
													

Non-Ajax : Confirm
Code

<a 	href="#"
	data-href="my-url.html?action=delete&item_id=1&confirm=true" 
	class="js-ajax-confirm btn btn-warning"

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-icon="fi fi-close"

	rel="nofollow">
		<i class="fi fi-shield-ok"></i>
		Non-Ajax : Confirm
</a>
													
Ajax : Confirm + Callback

<a 	href="#"
	data-href="my-url.html?action=delete&item_id=1&confirm=true" 
	class="js-ajax-confirm btn btn-warning"

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-method="GET" 
	data-ajax-confirm-callback-function="my_confirm_callback"

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-icon="fi fi-close">
		<i class="fi fi-shield-ok"></i>
		Ajax : Confirm + Callback
</a>
<script>

	var my_confirm_callback = function(el, data) {

		// el = button element
		// data = ajax result from server
		$.SOW.core.toast.show('danger', '', 'Welcome', 'top-center', 4000, true);

	}

</script>
											

Regular Modals






<!-- 

	Modal Size: 
		Add to .modal-dialog: 	
			.modal-sm
			.modal-md
			.modal-lg
			.modal-xl
			.modal-full

	For scrollable content, add to .modal-dialog:
		.modal-dialog-scrollable

-->


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#exampleModalMd">
    Medium
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalMd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelMd" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            
            <!-- Header -->
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabelMd">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="fi fi-close fs--18" aria-hidden="true"></span>
                </button>
            </div>

            <!-- Content -->
            <div class="modal-body">
                ...
            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">
                    <i class="fi fi-check"></i> 
                    Save
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fi fi-close"></i> 
                    Close
                </button>
            </div>

        </div>
    </div>
</div>
<!-- /Modal -->