2016-06-08 226 views
0

我有一個jsa頁面的Test.jsp頁面。頁面中有兩個模式,動態模式爲lal。第二個模態在第一個模態鏈接打開。當兩個模態都打開時,當我關閉第二個模態第一個模態也關閉,並且滾動不能正常工作。Bootstrap 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">&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> 

第二模式

<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> 

回答

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); 

這裏是jsFiddle Demo