在bootstrap的官網(wǎng)中了解到modal彈出只是支持單個(gè)，對(duì)于嵌套的modal并沒有提供相應(yīng)的解決方案，本文這里就根據(jù)網(wǎng)上找到的案例進(jìn)行整理得到。
解決方案
主要是通過對(duì)modal的zindex進(jìn)行賦值，使最新彈出的modal總是在最前面的。
$(document).ready(function () {
// 通過該方法來為每次彈出的模態(tài)框設(shè)置最新的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
整個(gè)樣例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>測(cè)試多個(gè)modal彈出功能</title>
<link rel="stylesheet">
</head>
<body>
<h2>層疊的Bootstrap Modal樣例</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">彈出第一個(gè)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">第一個(gè)Modal</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<p>這是第一個(gè)modal，接下來彈出的modal會(huì)以這個(gè)為基準(zhǔn)彈出新的modal框</p>
<br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">彈出另一個(gè)modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">關(guān)閉</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">第二個(gè)modal</h4>
</div>
<div class="container"></div>
<div class="modal-body">
這是另一個(gè)modal，是在前一個(gè)modal的基礎(chǔ)上彈出一個(gè)新的模態(tài)框
<br>
<br>
<a data-toggle="modal" href="#myModal3" class="btn btn-primary">彈出第三個(gè)modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">關(guān)閉</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">關(guān)閉</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 () {
// 通過該方法來為每次彈出的模態(tài)框設(shè)置最新的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>
