|
在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 href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" 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 href="http://www./web/ajax/201512/140080.shtml" 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>
|
