부트 스트랩 모달이 올바르게 작동하지 않습니다.

Question

jsa 페이지의 Test.jsp 페이지가 있습니다. page.data에 두 개의 모달이 모달로 동적으로 채워집니다. 두 번째 모달은 첫 번째 모달 링크에서 열립니다. 두 번째 모달을 닫을 때 두 모달이 모두 열려있을 때 첫 번째 모달도 닫히고 스크롤이 제대로 작동하지 않습니다.

FIRST 모달

<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">&times;</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 모달은

<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">&times;</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

당신은 당신의 문제를 해결하기 위해 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); 

는 jsFiddle Demo

입니다