在bootstrap的官網中了解到modal彈出只是支持單個，對于嵌套的modal并沒有提供相應的解決方案，本文這里就根據網上找到的案例進行整理得到。
解決方案
主要是通過對modal的zindex進行賦值，使最新彈出的modal總是在最前面的。
$(document).ready(function () {
// 通過該方法來為每次彈出的模態框設置最新的zIndex值，從而使最新的modal顯示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
// setTimeout(function() {
// $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
// }, 0);
});
});
Paste_Image.png
整個樣例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>測試多個modal彈出功能</title>
<link rel="stylesheet">
</head>
<body>
<h2>層疊的Bootstrap Modal樣例</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">彈出第一個modal</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">第一個Modal</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<p>這是第一個modal，接下來彈出的modal會以這個為基準彈出新的modal框</p>
<br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">彈出另一個modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">關閉</a>
<a href="#" class="btn btn-primary">保存</a>
</div>
</div>
</div>
</div>
<div class="modal fade rotate" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">第二個modal</h4>
</div>
<div class="container"></div>
<div class="modal-body">
這是另一個modal，是在前一個modal的基礎上彈出一個新的模態框
<br>
<br>
<a data-toggle="modal" href="#myModal3" class="btn btn-primary">彈出第三個modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">關閉</a>
<a href="#" class="btn btn-primary">保存</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<a target="_blank">百度提供的一些cdn庫</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">關閉</a>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<script >
$(document).ready(function () {
// 通過該方法來為每次彈出的模態框設置最新的zIndex值，從而使最新的modal顯示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
// setTimeout(function() {
// $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
// }, 0);
});
});
</script>
</body>
</html>
