关于bootstrap弹出二级对话框的使用
弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于CRM管理类系统来说应用场景很常见。看到网上有关于实现二级弹出框的方法，需要在一级对话框页面上添加不少css样式。其实，完全可以不用这么麻烦。
利用bootstrap实现二级对话框很简单，只需要在主页面上添加两个含有class="modal"的DIV标签。如下面代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="decorator" content="window" />
<style type="text/css">
th,td {
white-space: nowrap;
text-align:center;
}
</style>
</head>
<body>
<div class="row">
......
......
......
<!-- 代码映射编辑对话框(属于一级对话框) -->
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- Modal 新增[源系统]代码[类型](属于二级弹出对话框) -->
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<script type="text/javascript" src="codeMapList.js"></script>
</body>
</html>这样就可以在的对话框。
function newDataItem(param){
$('#modal_newDialog').modal({
keyboard: false,
backdrop:'static',
remote : Global.ctx + "/html/tuple/codeInfo.html"
});
}不过需要注意的是，在对话框的关闭按钮上调用的方法如下：
一级对话框关闭按钮的方法为如下绿色标注所示：
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" >XXX</h4>
</div>二级对话框关闭按钮的方法为如下绿色标注所示：
<div class="modal-header">
<button type="button" class="close" onclick="modal_close(this)" aria-hidden="true">×</button>
<h4 class="modal-title" >二级对话框</h4>
</div>如果不这样做，在关闭二级对话框的时候将会关闭一级对话框。
- 上一篇 »JavaScript DOM操作案例点击图片弹出对话框
- 下一篇 »PHP控制前台弹出对话框