Modals
Component #1
Google登录
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signupModal">Sign up modal</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="signupModalFormLogin" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-2">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
Google登录
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLoginWithEmail",
"groupName": "idForm"
}'>Log in with Email</a>
</div>
</div>
<!-- End Log in -->
<!-- Log in with Modal -->
<div id="signupModalFormLoginWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormLoginEmail">你的邮箱</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormLoginPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required minlength="8">
<span class="invalid-feedback">请输入有效的密码.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalFormSignup">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>已经有账户了?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-3">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
谷歌注册
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignupWithEmail",
"groupName": "idForm"
}'>Sign up with Email</a>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</div>
</div>
<!-- End Sign up -->
<!-- Sign up with Modal -->
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>已经有账户了?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupEmail">你的邮箱</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormSignupPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required>
<span class="invalid-feedback">您的密码无效。请再试一次。</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="signupModalFormSignupConfirmPassword">确认密码</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormSignupConfirmPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required
data-hs-validation-equal-field="#signupModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Sign up</button>
</div>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</form>
</div>
<!-- End Sign up with Modal -->
<!-- Reset Password -->
<div id="signupModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>忘记密码?</h2>
<p>请输入您注册时使用的电子邮件地址，我们会发送指令给你重置密码.</p>
</div>
<!-- En dHeading -->
<form class="js-validate need-validate" novalidate>
<div class="mb-3">
<!-- Form -->
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">你的邮箱</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> 返回登录页面
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="输入您的电子邮件地址" aria-label="输入您的电子邮件地址" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
<!-- End Form -->
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary form-control-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer d-block text-center py-sm-5">
<small class="text-cap mb-4">被世界上最好的团队所信任</small>
<div class="w-85 mx-auto">
<div class="row justify-content-between">
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/gitlab-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/fitbit-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/flow-xo-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/layar-gray.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Modal -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>
Component #2
登录 to Front
登录 to manage your account
注册
Fill out the form to get started
忘记密码
Instructions will be sent to you
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">Log in modal</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="loginModalFormLogin">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Log in to Front</h3>
<p>Login to manage your account</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormLoginEmail">你的邮箱</label>
<input type="email" class="form-control" name="email" id="loginModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormLoginPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required minlength="8">
<span class="invalid-feedback">请输入有效的密码.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
Google登录
</span>
</button>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Log in -->
<div id="loginModalFormSignup" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Sign up</h3>
<p>Fill out the form to get started</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupEmail">你的邮箱</label>
<input type="email" class="form-control form-control-lg" name="email" id="loginModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormSignupPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required>
<span class="invalid-feedback">您的密码无效。请再试一次。</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="loginModalFormSignupConfirmPassword">确认密码</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="loginModalFormSignupConfirmPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required
data-hs-validation-equal-field="#loginModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="text-center mb-3">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
谷歌注册
</span>
</button>
<p>已经有账户了?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Reset Password -->
<div id="loginModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">忘记密码</h3>
<p>Instructions will be sent to you</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginSignupModalFormResetPasswordEmail" tabindex="0">你的邮箱</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> 返回登录页面
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="loginSignupModalFormResetPasswordEmail" tabindex="1" placeholder="输入您的电子邮件地址" aria-label="输入您的电子邮件地址" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Modal -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>