需求:让第二次点击的模态框显示在第一次点击显示的模态框上
方法一:
调整代码中模态框的位置,把想在上层显示的模态框(第二次点击显示的)写在第一次点击显示的模态框代码之前
<!-- 显示地址的模态框 -->
<div class="modal fade bd-example-modal-lg" id="selectmodal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="lmmodalbt">地址显示</h5>
<button type="button" class="close" onclick="closeDzModal2()">
<span>×</span>
</button>
</div>
<div class="modal-body">
<!-- 表格 -->
<table class="table table-hover" id="dz_tb2">
<thead>
<tr>
<th scope="col" width="100px">编号</th>
<th scope="col">省</th>
<th scope="col">市</th>
<th scope="col">区</th>
<th scope="col">详细地址</th>
<th scope="col">电话号码</th>
<th scope="col">顾客id</th>
</tr>
</thead>
<!-- 表内容 -->
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeDzModal2()">Close</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
<!-- 添加表单模态框 -->
<div class="modal fade" id="dzmodal" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dzmodalbt">地址信息</h5>
<button type="button" class="close" onclick="closeDzModal()">
<span>×</span>
</button>
</div>
<div class="modal-body">
<!-- 表单 -->
<form id="dz_form" action="javascript:void(0)">
<div class="form-group">
<input type="hidden" name="id"/>
</div>
<div class="form-group form-row">
<div class="col-3">
<input type="text" class="form-control" id="input_province" name="province">
</div>
<div class="col-1">
<label for="input_province">省</label>
</div>
<div class="col-3">
<input type="text" class="form-control" id="input_city" name="city">
</div>
<div class="col-1">
<label for="input_city">市</label>
</div>
<div class="col-3">
<input type="text" class="form-control" id="input_area" name="area">
</div>
<div class="col-1">
<label for="input_area">区</label>
</div>
</div>
<div class="form-group">
<label for="input_address">详细地址</label>
<input type="text" class="form-control" id="input_address" name="address">
</div>
<div class="form-group">
<label for="input_telephone">电话号码</label>
<input type="text" class="form-control" id="input_telephone" name="telephone">
</div>
<div class="form-group">
<label for="input_customerId">顾客号</label>
<select class="form-control input_customerId" id="input_customerId" name="customerId" value="" >
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeDzModal()">Close</button>
<button type="button" class="btn btn-primary" onclick="submitDz()">提交</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
方法二:
$(document).on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
function setModalsAndBackdropsOrder() {
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');
}