"login modal signup"
Bootstrap 3.3.0 Snippet by xrozix

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <header> <nav class="navbar header" role="navigation"> <div class="container"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li > <a id="login-button" class="login-button" role="button" data-toggle="modal" data-target="#login-modal" data-backdrop="static" data-controls-modal="login-modal" > Login</a> </li> </ul> </div> </div> <!-- /.container --> </nav> </header> <div class="modal fade loginpopup index" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > <div class="modal-dialog login-form animated"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <form name="loginform"> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="login" name="login"> <div class="form-group" > <input type="email" id="userName" name="userName" class="form-control" placeholder="UserName" required > <span class="has-error" ng-show="loginform.userName.$touched && loginform.userName.$invalid" class="font-ten"> <span class="has-error" ng-show="loginform.userName.$error.email" class="font-ten">Invalid email address.</span> <span class="has-error" ng-show="loginform.userName.$error.required" class="font-ten">UserName is required..</span> </span> </div> <div class="form-group"> <input type="password" id="psd" name="psd" class="form-control" placeholder="Password" required > </div> <div class="form-group text-center" > <button class="btn btn3d text-center imm" type="submit" > Log In </button> </div> <div class="form-group login-index" style="margin-bottom:0px;padding-top:0px !important"> <input type="checkbox" name="checkbox" id="Option"> <label class="Option" for="Option"> Rememer Me </label> <a href="/#forgetpassword" data-toggle="tab" id="forgotpsw">Forgot Password?</a> </div> </div> <div class="tab-pane" id="forgetpassword"> <div class="form-group " > <input type="email" id = "emailId" name="emailId" required class="form-control" placeholder="Email Address" > </div> <div class="form-actions text-center"> <button type="button" class="btn btn3d imm" >Submit </button> </div> </div> </div> </form> </div> </div> </div> </div> </body> </html>
.header { background: orange; color: #fff; } .navbar-brand { padding: 0px; } .navbar-brand>img { width: 250px; height: 51px; } .navbar { margin-bottom: 0px !important; } .navbar-nav>li>a { color: #fff !important; padding-bottom: 12px; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; /* background-color:#3385ff !important; */ color:#d83b01 !important; cursor:pointer; }
$(document).ready(function() { $('#login-modal').modal('show'); });

Related: See More

Light Bootstrap Dashboard React
Signup form
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: