<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> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="form-body"> <ul class="nav nav-tabs final-login"> <li class="active"><a data-toggle="tab" href="#sectionA">Sign In</a></li> <li><a data-toggle="tab" href="#sectionB">Join us!</a></li> </ul> <div class="tab-content"> <div id="sectionA" class="tab-pane fade in active"> <div class="innter-form"> <form class="sa-innate-form" method="post"> <label>Email Address</label> <input type="text" name="username"> <label>Password</label> <input type="password" name="password"> <button type="submit">Sign In</button> <a href="">Forgot Password?</a> </form> </div> <div class="social-login"> <p>- - - - - - - - - - - - - Sign In With - - - - - - - - - - - - - </p> <ul> <li><a href=""><i class="fa fa-facebook"></i> Facebook</a></li> <li><a href=""><i class="fa fa-google-plus"></i> Google+</a></li> <li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li> </ul> </div> <div class="clearfix"></div> </div> <div id="sectionB" class="tab-pane fade"> <div class="innter-form"> <form class="sa-innate-form" method="post"> <label>Name</label> <input type="text" name="username"> <label>Email Address</label> <input type="text" name="username"> <label>Password</label> <input type="password" name="password"> <button type="submit">Join now</button> <p>By clicking Join now, you agree to hifriends's User Agreement, Privacy Policy, and Cookie Policy.</p> </form> </div> <div class="social-login"> <p>- - - - - - - - - - - - - Register With - - - - - - - - - - - - - </p> <ul> <li><a href=""><i class="fa fa-facebook"></i> Facebook</a></li> <li><a href=""><i class="fa fa-google-plus"></i> Google+</a></li> <li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li> </ul> </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