Bootstrap Modal not work correctly - bootstrap-modal

Question

I have a jsa page Test.jsp page .There are two modal in the page.data is dynamically loded in modal. second modal open at first modal link.when both modal are open when i close second modal first modal also close and also scroll is not work correctly.
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>
SECOND MODAL
<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>

Answer 1

You can use z-Index to solve your problem. For example:
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);
Here is jsFiddle Demo