<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 ----------> <!-- Large modal --> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Login modal</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button> <h4 class="modal-title" id="myModalLabel"> Login/Registration - <!--<a href="http://www.jquery2dotnet.com">jquery2dotnet.com</a>--></h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#Login" data-toggle="tab">Login</a></li> <li><a href="#Registration" data-toggle="tab">Sign Up</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="Login"> <form role="form" class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label"> Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email1" placeholder="Email" /> </div> </div> <div class="form-group"> <label for="exampleInputPassword1" class="col-sm-2 control-label"> Password</label> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputPassword1" placeholder="Email" /> </div> </div> <div class="row"> <div class="col-sm-2"> </div> <div class="col-sm-10"> <button type="submit" class="btn btn-primary btn-sm"> Submit</button> <a href="javascript:;">Forgot your password?</a> <button type="button" data-dismiss="modal" class="btn btn-default btn-sm"> Cancel</button> </div> </div> </form> </div> <div class="tab-pane" id="Registration"> <form role="form" class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label"> Name</label> <div class="col-sm-10"> <div class="row"> <div class="col-md-3"> <select class="form-control"> <option>Mr.</option> <option>Ms.</option> <option>Mrs.</option> </select> </div> <div class="col-md-9"> <input type="text" class="form-control" placeholder="Name" /> </div> </div> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label"> Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email" /> </div> </div> <div class="form-group"> <label for="mobile" class="col-sm-2 control-label"> Mobile</label> <div class="col-sm-10"> <input type="email" class="form-control" id="mobile" placeholder="Mobile" /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password" /> </div> </div> <div class="row"> <div class="col-sm-2"> </div> <div class="col-sm-10"> <a href="#"><button type="button" class="btn btn-primary btn-sm"> Save & Continue</button></a> <button type="button" data-dismiss="modal" class="btn btn-default btn-sm"> Cancel</button> </div> </div> </form> </div> </div> <div id="OR" class="hidden-xs"> OR</div> </div> <div class="col-md-4"> <div class="row text-center sign-with"> <div class="col-md-12"> <h3> Sign in with</h3> </div> <div class="col-md-12"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Facebook</a> <a href="#" class="btn btn-danger"> Google</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.nav-tabs { margin-bottom: 15px; } .sign-with { margin-top: 25px; padding: 20px; } div#OR { height: 30px; width: 30px; border: 1px solid #C2C2C2; border-radius: 50%; font-weight: bold; line-height: 28px; text-align: center; font-size: 12px; float: right; position: absolute; right: -16px; top: 40%; z-index: 1; background: #DFDFDF; }

$('#myModal').modal('show'); // www.jquery2dotnet.com