bootstrap的modal 1上弹出modal 2,或者modal 1上弹出一个iview的确认框;
```
<script>
setModalsAndBackdropsOrder:function() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
</script>
```
借鉴1自:https://blog.csdn.net/k358971707/article/details/71908862?utm_source=blogxgwz2
借鉴2自:https://blog.csdn.net/wzp6010625/article/details/78728894?utm_source=blogxgwz5
然后将对应的第一个modal 1的id,以及触发弹出modal 1 的方法中,将对应的设置z-index的方法加上
showModalOne: function (data) {
$('#modalOne').on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('#modalOne'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
$('#modalOne').modal('show');
},
<div class="modal fade bs-example-modal-lg" id="modalTwo" tabindex="-1" role="dialog" aria-labelledby="modalTwoLabel"
aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"> <!--data-dismiss="modal"-->
<button type="button" class="close" @click="hidemodal('modalTwo')" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalTwoLabel">
弹窗2
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer form-group" style="text-align:left">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" @click="hidemodal('modalTwo')">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
//对应的script方法中将hidemodal方法加上
hidemodal: function (id) {
$('#' +id).modal('hide');
},
</script>
如果还有iview的确认框
this.$Modal.confirm(config);
//在确认框弹窗来之后,将对应的z-index的进行调整
</script>
$('.ivu-modal-wrap').css('z-index','1601');
$('.ivu-modal-mask').css('z-index','1601');