Create Registration Modal box using bootstrapBootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development
url bootstrapjs
http://getbootstrap.com/2.3.2/javascript.html#modals
Download
<html>
<head>
<title>Bootstrap registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
.modal {
width: auto;
left: 57%;
}
label.checkbox {
float: none;
margin-top: -6px;
margin-bottom: 15px;
margin-left: 1px;
width: 280px;
}
</style>
</head>
<body>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>New User Details</h3>
</div>
<div class="modal-body">
<p><input type="text" class="span4" name="first_name" id="first_name" placeholder="First Name"></p>
<p><input type="text" class="span4" name="last_name" id="last_name" placeholder="Last Name"></p>
<p><input type="text" class="span4" name="email" id="email" placeholder="Email"></p>
<p>
<select class="span4" name="teamId" id="teamId">
<option value="">Team Number...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<p>
<label class="checkbox span4">
<input type="checkbox" id="isAdmin" name="isAdmin"> Is an admin?
</label>
</p>
<p><input type="password" class="span4" name="password" id="password" placeholder="Password"></p>
<p><input type="password" class="span4" name="password2" id="password2" placeholder="Confirm Password"></p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>
<a href="#" id="btnModalSubmit" class="btn btn-primary">Create</a>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
