"login.html"
Bootstrap 4.1.1 Snippet by AskForDesign

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta charset="UTF-8"/> <script src=" cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js "> </script> </head> </body> <div class="container"> <h1>نافذة تسجيل الدخول </h1> <a id="modal_trigger" href="#modal" class="btn">اضط هنا لتسجيل الدخول او التسجيل</a> <div id="modal" class="popupContainer" style="display:none;"> <header class="popupHeader"> <span class="header_title">Login</span> <span class="modal_close"><i class="fa fa-times"></i></span> </header> <section class="popupBody"> <!-- Social Login --> <div class="social_login"> <div class=""> <a href="#" class="social_box fb"> <span class="icon"><i class="fa fa-facebook"></i></span> <span class="icon_title">Connect with Facebook</span> </a> <a href="#" class="social_box google"> <span class="icon"><i class="fa fa-google-plus"></i></span> <span class="icon_title">Connect with Google</span> </a> </div> <div class="centeredText"> <span>Or use your Email address</span> </div> <div class="action_btns"> <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div> <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div> </div> </div> <!-- Username & Password Login form --> <div class="user_login"> <form> <label>Email / Username</label> <input type="text" /> <br /> <label>Password</label> <input type="password" /> <br /> <div class="checkbox"> <input id="remember" type="checkbox" /> <label for="remember">Remember me on this computer</label> </div> <div class="action_btns"> <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div> <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div> </div> </form> <a href="#" class="forgot_password">Forgot password?</a> </div> <!-- Register Form --> <div class="user_register"> <form> <label>Full Name</label> <input type="text" /> <br /> <label>Email Address</label> <input type="email" /> <br /> <label>Password</label> <input type="password" /> <br /> <div class="checkbox"> <input id="send_updates" type="checkbox" /> <label for="send_updates">Send me occasional email updates</label> </div> <div class="action_btns"> <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div> <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div> </div> </form> </div> </section> </div> </div> <body> </html>
body { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; color: #666; } h1 { text-align: center; margin-bottom: 0; margin-top: 60px; } #lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none; } .popupContainer { position: absolute; width: 330px; height: auto; left: 45%; top: 60px; background: #FFF; } #modal_trigger { margin: 40px auto; width: 200px; display: block; border: 1px solid #DDD; border-radius: 4px; } .btn { padding: 10px 20px; background: #F4F4F2; } .btn_red { background: #ED6347; color: #FFF; } .btn:hover { background: #E4E4E2; } .btn_red:hover { background: #C12B05; } a.btn { color: #666; text-align: center; text-decoration: none; } a.btn_red { color: #FFF; } .one_half { width: 50%; display: block; float: left; } .one_half.last { width: 45%; margin-left: 5%; } /* Popup Styles*/ .popupHeader { font-size: 16px; text-transform: uppercase; } .popupHeader { background: #F4F4F2; position: relative; padding: 10px 20px; border-bottom: 1px solid #DDD; font-weight: bold; } .popupHeader .modal_close { position: absolute; right: 0; top: 0; padding: 10px 15px; background: #E4E4E2; cursor: pointer; color: #aaa; font-size: 16px; } .popupBody { padding: 20px; } /* Social Login Form */ .social_login {} .social_login .social_box { display: block; clear: both; padding: 10px; margin-bottom: 10px; background: #F4F4F2; overflow: hidden; } .social_login .icon { display: block; width: 10px; padding: 5px 10px; margin-right: 10px; float: left; color: #FFF; font-size: 16px; text-align: center; } .social_login .fb .icon { background: #3B5998; } .social_login .google .icon { background: #DD4B39; } .social_login .icon_title { display: block; padding: 5px 0; float: left; font-weight: bold; font-size: 16px; color: #777; } .social_login .social_box:hover { background: #E4E4E2; } .centeredText { text-align: center; margin: 20px 0; clear: both; overflow: hidden; text-transform: uppercase; } .action_btns { clear: both; overflow: hidden; } .action_btns a { display: block; } /* User Login Form */ .user_login { display: none; } .user_login label { display: block; margin-bottom: 5px; } .user_login input[type="text"], .user_login input[type="email"], .user_login input[type="password"] { display: block; width: 90%; padding: 10px; border: 1px solid #DDD; color: #666; } .user_login input[type="checkbox"] { float: left; margin-right: 5px; } .user_login input[type="checkbox"]+label { float: left; } .user_login .checkbox { margin-bottom: 10px; clear: both; overflow: hidden; } .forgot_password { display: block; margin: 20px 0 10px; clear: both; overflow: hidden; text-decoration: none; color: #ED6347; } /* User Register Form */ .user_register { display: none; } .user_register label { display: block; margin-bottom: 5px; } .user_register input[type="text"], .user_register input[type="email"], .user_register input[type="password"] { display: block; width: 90%; padding: 10px; border: 1px solid #DDD; color: #666; } .user_register input[type="checkbox"] { float: left; margin-right: 5px; } .user_register input[type="checkbox"]+label { float: left; } .user_register .checkbox { margin-bottom: 10px; clear: both; overflow: hidden; }
/ Plugin options and our code $("#modal_trigger").leanModal({ top: 100, overlay: 0.6, closeButton: ".modal_close" }); $(function() { // Calling Login Form $("#login_form").click(function() { $(".social_login").hide(); $(".user_login").show(); return false; }); // Calling Register Form $("#register_form").click(function() { $(".social_login").hide(); $(".user_register").show(); $(".header_title").text('Register'); return false; }); // Going back to Social Forms $(".back_btn").click(function() { $(".user_login").hide(); $(".user_register").hide(); $(".social_login").show(); $(".header_title").text('Login'); return false; }); });

Related: See More

Paper Kit
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: