"Simpal Modal"
Bootstrap 3.3.0 Snippet by Walia5

Post to Facebook Tweet this

<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 ----------> <body> <div class="container"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="margin-top: 10px;" >Modal </button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3 Walia"> <div class="backcolor"> <span class="close" data-dismiss="modal">×</span> <div class="row text-center h2back"> <h2>Profile </h2> </div> <form> <div class="col-md-6 col-sm-6"> <label>First Name: </label> <input type="text" class="form-control" placeholder="Walia"> </div> <div class="col-md-6 col-sm-6"> <label>Last Name: </label> <input type="text" class="form-control" placeholder="Walia"> </div> <div class="col-md-6 col-sm-6"> <label> Address: </label> <input type="text" class="form-control" placeholder="Punjab"> </div> <div class="col-md-6 col-sm-6"> <label> Mobile No. </label> <input type="text" class="form-control" placeholder="9876543210"> </div> <div class="col-md-12 col-sm-12"> <div class="col-md-6 col-sm-6"> <a href="#"> <button type="button" class="btn-style form-control">Back </button> </a> </div> <div class="col-md-6 col-sm-6"> <a href="#"> <button type="button" class="btn-style form-control">Next </button> </a> </div> </div> </form> </div> </div> </div> </div> </div> </body>
.Walia { margin-top: 80px; background-color:White; border-radius: 12px; box-shadow: 0px 0px 1px 1px rgba(204, 204, 204, 0.30); } .btn-style{ color: white !important; background-color: #666666 !important; margin-top: 20px; margin-bottom: 25px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; display: inline-block !important; } .h2back h2 { background-color: #666666; color:white; margin-top: 0px; border-radius: 12px 12px 0px 0px; font-size: 14px; font-size: 20px; padding: 10px; } .close { color: white; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: white; text-decoration: none; cursor: pointer; }

Related: See More

Rubik Presentation Page
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
Squarespace like modal

Questions / Comments: