关于bootstrap弹出二级对话框的使用

developer 2022年03月12日编程设计 316 0

弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于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" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 
    <!-- Modal 新增[源系统]代码[类型](属于二级弹出对话框) --> 
    <div class="modal" id="modal_newDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
  </div> 
    <script type="text/javascript" src="codeMapList.js"></script> 
</body> 
</html>

这样就可以在id="codeMapEditModal"的对话框弹出之后，在该对话框对应的js脚本中调用如下方法即可弹出id="modal_newDialog"的对话框。

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">&times;</button>                 
                <h4 class="modal-title" id="codeMapEditHeader">XXX</h4>
</div>

二级对话框关闭按钮的方法为如下绿色标注所示：

<div class="modal-header"> 
    <button type="button" class="close"  onclick="modal_close(this)" aria-hidden="true">&times;</button> 
    <h4 class="modal-title" id="myModalLabel">二级对话框</h4>
</div>