<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<!--
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 -->