關於bootstrap彈出二級對話方塊的使用

Franson發表於2016-07-28
boot

彈出二級對話方塊，即在對話方塊的基礎上再彈出一個對話方塊。這對於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>

如果不這樣做，在關閉二級對話方塊的時候將會關閉一級對話方塊。

相關文章