Bootstrap模态登录框

【实例截图】

【核心代码】

<a style="display:block;width:200px;height:42px;line-height:42px;font-size:18px;text-align:center;margin:40px auto;font-weight:800;" href="#" class="tbox">Click to pop up</a>

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<h4 class="modal-title" align="center">User login</h4>
<br/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-offset-2 col-sm-2 control-label">username</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-offset-2 col-sm-2 control-label">password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-5">
<button id="submitBtn" type="submit" class="btn btn-default btn-block btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(function(){

$(".tbox").click(function(){
$('#myModal').modal('show') //显示模态框
})

});