<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 ----------> <link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet"> <p class='text-center'> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#demo"> Open Modal </button> </p> <div class="modal fade" id="demo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Login to MyWebsite.com</h3> </div> <div class="modal-body"> <form method="post" action='' name="login_form"> <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> <p><button type="submit" class="btn btn-primary">Sign in</button> <a href="#">Forgot Password?</a> </p> </form> </div> <div class="modal-footer"> New To MyWebsite.com? <a href="#" class="btn btn-primary">Register</a> </div> </div> </div> </div>

.modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 300px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0); opacity: 1; } .modal-header { font-family: "Bree Serif"; background-color: #F6F5F5; border-radius: 5px; } .modal-body { font-size: 16px; } p { margin: 50px; }