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