两个模态框优先级问题

需求：让第二次点击的模态框显示在第一次点击显示的模态框上

方法一：

       调整代码中模态框的位置，把想在上层显示的模态框(第二次点击显示的)写在第一次点击显示的模态框代码之前

 

<!-- 显示地址的模态框 -->
		<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>&times;</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>&times;</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');
 }