利用BootStrap弹出二级对话框的简单实现方法
弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于CRM管理类系统来说应用场景很常见。看到网上有关于实现二级弹出框的方法，需要在一级对话框页面上添加不少css样式。其实，完全可以不用这么麻烦。
利用bootstrap实现二级对话框很简单，只需要在主页面上添加两个含有class="modal"的DIV标签。如下面代码：
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metacharset="utf-8">
<metaname="decorator"content="window"/>
<styletype="text/css">
th,td{
white-space:nowrap;
text-align:center;
}
</style>
</head>
<body>
<divclass="row">
......
......
......
<!--代码映射编辑对话框(属于一级对话框)-->
<divclass="modal"id="codeMapEditModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"></div>
<!--Modal新增[源系统]代码[类型](属于二级弹出对话框)-->
<divclass="modal"id="modal_newDialog"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
</div>
<scripttype="text/javascript"src="codeMapList.js"></script>
</body>
</html>
这样就可以在id="codeMapEditModal"的对话框弹出之后，在该对话框对应的js脚本中调用如下方法即可弹出id="modal_newDialog"的对话框。
functionnewDataItem(param){
$('#modal_newDialog').modal({
keyboard:false,
backdrop:'static',
remote:Global.ctx+"/html/tuple/codeInfo.html"
});
}
不过需要注意的是，在对话框的关闭按钮上调用的方法如下：
一级对话框关闭按钮的方法为如下绿色标注所示：
<divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4class="modal-title"id="codeMapEditHeader">XXX</h4></div>
二级对话框关闭按钮的方法为如下绿色标注所示：
<divclass="modal-header"> <buttontype="button"class="close"onclick="modal_close(this)"aria-hidden="true">×</button> <h4class="modal-title"id="myModalLabel">二级对话框</h4></div>
如果不这样做，在关闭二级对话框的时候将会关闭一级对话框。
以上所述是小编给大家介绍的利用BootStrap弹出二级对话框的简单实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！