我有一个jsa页面的Test.jsp页面。在页面中有两个模态.data是在模态中动态编码的。第二个模态打开第一个模态链接。当两个模态打开时，我关闭第二个模态第一个模态也关闭，滚动也无法正常工作。
FIRST MODAL
<div id="panelModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Department Details</h4>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="col-md-2">Panel Name</td>
<td class="col-md-2">
<label id="panel1" text=""></label></td>
<td class="col-md-2">Panel Price</td>
<td class="col-md-2">
<label id="price1" text=""></label></td>
<td class="col-md-2">Description</td>
<td class="col-md-2">
<label id="description1"></label></td>
</tr>
<tr>
<td class="col-md-2">Mapped Test </td>
<td class="col-md-2" id="tests">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
第二个模式
<div id="testModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Test Details</h4>
</div>
<!-- <div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body"> -->
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="col-md-2">Test Common Name</td>
<td class="col-md-2">
<label id="testName1" text=""></label></td>
<td class="col-md-2">Test Technical Name</td>
<td class="col-md-2">
<label id="technicalName"></label></td>
<td class="col-md-2">Test Area</td>
<td class="col-md-2">
<label id="testArea1"></label></td>
</tr>
<tr>
<td class="col-md-2">Technology Long Form</td>
<td class="col-md-2">
<label id="testCategory1"></label></td>
<td class="col-md-2">Technology Short Form</td>
<td class="col-md-2">
<label id="testCategory2"></label></td>
<td class="col-md-2">Sub Test Technology</td>
<td class="col-md-2">
<label id="subTestCategory1"></label></td>
</tr>
<tr>
<td class="col-md-2">TAT</td>
<td class="col-md-2">
<label id="tat1"></label></td>
<td class="col-md-2">Test MRP</td>
<td class="col-md-2">
<label id="testMrp1"></label></td>
<td class="col-md-2">Specimen Type</td>
<td class="col-md-2" id="specimenType1">
</td>
</tr>
<tr>
<td class="col-md-2">Preservation</td>
<td class="col-md-2">
<label id="preservation1"></label></td>
<td class="col-md-2">Comment</td>
<td class="col-md-2">
<label id="comment1"></label></td>
<td class="col-md-2">NABL Accredited</td>
<td class="col-md-2">
<label id="nablAccredited"></label></td>
</tr>
<tr>
<td class="col-md-2">Test Type</td>
<td class="col-md-2">
<label id="testType1"></label></td>
<td class="col-md-2">Site</td>
<td class="col-md-2">
<label id="site1"></label></td>
<td class="col-md-2">Department</td>
<td class="col-md-2">
<label id="department1"></label></td>
</tr>
<tr>
<td class="col-md-2">Sub Department</td>
<td class="col-md-2">
<label id="subdepartment1"></label></td>
<td class="col-md-2">Description</td>
<td class="col-md-2">
<label id="description1"></label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以使用z-Index来解决问题。例如：
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);