<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 ----------> <div class="container"> <div class="row"> <div class="row"> <div class="clearHeader"> <div class="col-sm-4"> <a href="index.html"></a> </div> <div class="col-sm-8"> <a href="#sidr" class="burgWrapper" id="simple-menu"> <div class="burg"></div> </a> <ul class="topOptions"> <li><a href="#">List your property</a></li> <li><a href="blog.html">Blog</a></li> <li><a data-target=".bs-modal-sm" data-toggle="modal" href="#signup">Login</a></li> </ul> </div> </div> </div> </div> <div aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade bs-modal-sm adj-modal in" style="display: block;"> <div class="modal-content"> <div class="modal-header cus-modal-header"> <button data-dismiss="modal" class="close close-adj" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h2 id="myModalLabel" class="modal-title" style="color:#fff;">LOGO</h2> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-7"> <a href="#" class="btn btn-danger"><i class="fa fa-google-plus"></i>   Continue with Google</a> <a href="" class="btn btn-primary"><i class="fa fa-facebook"></i>   Continue with Facebook</a> <span class="col-sm-5"><hr></span> <span style="line-height:40px;" class="col-sm-2"> OR</span> <span style="line-height:18px;" class="col-sm-5"><hr></span> <div id="div1"> <form class="from-login" method="post"> <h4>LogIn with Email</h4> <input type="text" require="" placeholder="Email" kl_virtual_keyboard_secure_input="on"> <input type="password" placeholder="********" kl_virtual_keyboard_secure_input="on"> <input type="submit" value="Submit" class="submit"> <div class="clearfix"></div> <p class="text-center">Not a Member Yet? Please <a id="sign" href="#">Sign up</a> Free now </p> </form> </div> </div> <div class="col-xs-5"> <div> <p class="lead">Why Sign Up</p> <hr> <ul style="line-height:2" class="list-unstyled"> <li><i style="font-size:10px; color:orange" class="fa fa-circle success-text"></i>  See all your orders</li> <li><i style="font-size:10px; color:orange" class="fa fa-circle success-text"></i>  Fast re-order</li> <li><i style="font-size:10px; color:orange" class="fa fa-circle success-text"></i>  Save your favorites</li> <li><i style="font-size:10px; color:orange" class="fa fa-circle success-text"></i>  Fast checkout</li> <li><i style="font-size:10px; color:orange" class="fa fa-circle success-text"></i>  Get a gift <small>(only new customers)</small></li> </ul> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'); .topOptions ul{list-style-type:none;} .topOptions li { float: right; margin-right: 30px; margin-top: 10px; } .topOptions li a { color: #fff; text-transform: uppercase; background:orange; padding:10px; } .topOptions li a:hover { color: #fff; text-decoration: none; } .linkSection { background-color: #f1f1f1; padding: 60px 0; } .darkHeader { background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1; } .adj-modal { margin: 30px auto; max-width: 600px; overflow-y:auto; } .cus-modal-header { background: #000 none repeat scroll 0 0; padding: 5px 15px; } button.close { color: #fff !important; font-size: 50px; font-weight: normal; } .from-login { float: left; margin: 0; padding: 0; } .from-login input { border: 1px solid #f2f2f2; height: 70px; padding: 10px; width: 100%; } .from-login input.submit { background: orange none repeat scroll 0 0; border: medium none; color: #fff; font-size: 18px; height: 40px; line-height: 20px; margin: 5px 0; padding: 10px; width: 100%; } .modal-body .btn-danger { border-radius: 0; box-shadow: 1px 1px 0 #ccc; width: 100%; } .modal-body .btn-primary { border-radius: 0; box-shadow: 1px 1px 0 #ccc; margin-top: 5px; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $("#sign").click(function(){ $("#div1").load("sign-up.html"); }); </script>