html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/json2.js"></script>
</head>
<body>
<div>
<div class="mycontainer">
<table width="100%">
<tr>
<td>
<button id='addFEIssue' name='addFEIssue' class="btn btn-primary" data-toggle="modal" data-target="#myModal">展示浮層</button>
</td>
</tr>
</table>
</div>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">浮層標題</h4>
</div>
<div class="modal-body">
<p style="color:red" align="center" id="warnP"></p>
<table class="table table-striped">
<tr>
<td>
<p>顯示測試信息</p>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="closeAddFEIssue" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary" id="saveandsend">
提交併發送郵件
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>javascript:
<script>
// 點擊彈出頁關閉按鈕時，設置增加前端資源上線爲不可用
$('#closeAddFEIssue').on('click', function(e) {
console.log('點擊關閉按鈕');
});
// 彈出頁關閉時，設置增加前端資源上線爲不可用
$('#myModal').on('hide.bs.modal', function(e) {
console.log('浮層要隱藏了。。。');
});
$('#saveandsend').on('click',function(e){
console.log('點擊發送按鈕');
$('#myModal').modal('hide');
});
</script>效果如下：
modal支持的事件有一下4個，可以結合這幾個事件添加自己的代碼，完成想要的結果
參考文章：
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
