Login Form In Modal - Web Designer Wall

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div id="login-overlay" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Login to site.com</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-6"> <div class="well"> <form id="loginForm" method="POST" action="/login/" novalidate="novalidate"> <div class="form-group"> <label for="username" class="control-label">Username</label> <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="[email protected]"> <span class="help-block"></span> </div> <div class="form-group"> <label for="password" class="control-label">Password</label> <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> <span class="help-block"></span> </div> <div id="loginErrorMsg" class="alert alert-error hide">Wrong username og password</div> <div class="checkbox"> <label> <input type="checkbox" name="remember" id="remember"> Remember login </label> <p class="help-block">(if this is a private computer)</p> </div> <button type="submit" class="btn btn-success btn-block">Login</button> <a href="/forgot/" class="btn btn-default btn-block">Help to login</a> </form> </div> </div> <div class="col-xs-6"> <p class="lead">Register now for <span class="text-success">FREE</span></p> <ul class="list-unstyled" style="line-height: 2"> <li><span class="fa fa-check text-success"></span> See all your orders</li> <li><span class="fa fa-check text-success"></span> Fast re-order</li> <li><span class="fa fa-check text-success"></span> Save your favorites</li> <li><span class="fa fa-check text-success"></span> Fast checkout</li> <li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li> <li><a href="/read-more/"><u>Read more</u></a></li> </ul> <p><a href="/new-customer/" class="btn btn-info btn-block">Yes please, register now!</a></p> </div> </div> </div> </div> </div>

Close

Login Form In Modal

This is an example of adding Login Form in Modal. Bootstrap contains a Modal component, They are Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element. ModelContent is divided into modelHeader, modal-body, and ModalFooter. ModalBody contains the form and registration details whereas the ModalHeader contains header details. Form and registration details are added in two columns in a row. This does not use the modal footer.