<!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>

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

以上所述是小編給大家介紹的利用BootStrap彈出二級對話框的簡單實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: