モダールを追加するとドロップダウントグルが機能しなくなる

Question

今まではうまくいきました。私はコードに2つのブートストラップモーダルを追加しました。私のコードにモーダルを追加した後、私のドロップダウンが動作しません。それはちょうど正常に動作します。私は理由を理解できません。 これはデータトグルと関係がありますか？私はその両方の間で唯一の共通点を見ることができます これは私のコードです。

<div class="my-container" ng-controller="compCategoryCtrl"> 
<div class="compare-table"> 
    <div class="head-info"> 
     <h3>Select colleges to compare</h3> 
    </div> 
    <div class="clearfix"></div> 
    <div class="find-colleges"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <div class="dropdown"> 
         <button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}} 
        <span class="caret"></span></button> 
         <ul class="dropdown-menu find-menu"> 
          <li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li> 
         </ul> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="dropdown"> 
         <button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}} 
        <span class="caret"></span></button> 
         <ul class="dropdown-menu find-menu"> 
          <li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li> 

         </ul> 

        </div> 
       </div> 
       <div class=" col-md-4 go"> 
        <button class="btn compare_buton trigger open" ng-click="fetch()">Go</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="clearfix"></div> 
    <div class="nav-for-table slider close"> 
     <div id="home"> 
      <table class="table table-striped table-hover table-bordered"> 

       <tr ng-repeat="(key, value) in data1[0]"> 

        <td class="col-md-6 head-field active">{{key}}</td> 
        <td class="col-md-3" ng-repeat="x in data1"> 
         {{x[key]}} 
        </td> 
        <td class="col-md-3" ng-repeat="x in data1"> 
         {{data2[$index][key]}} 
        </td> 
       </tr> 
       <tr> 
        <td class="col-md-6 head-field active">Departments</td> 
        <td class="col-md-3" data-toggle="modal" data-target="#show1"> 
         Click here to view Departments 
        </td> 
        <td class="col-md-3" data-toggle="modal" data-target="#show2"> 
         Click here to view Departments 
        </td> 
       </tr> 

      </table> 
     </div> 


    </div> 
</div> 



<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 class="modal-title">Department Information</h3> 
      </div> 
      <div class="modal-body"> 

       <table class="table table-striped" id="tblGrid"> 
        <tr> 
         <th>Branch</th> 
         <th>Seats</th> 
         <th>Rating</th> 
         <th>Placements</th> 
        </tr> 
        <tr ng-repeat="x in dept1"> 
         <td>{{x.branch}}</td> 
         <td>{{x.seats}}</td> 
         <td>{{x.rating}}</td> 
         <td>{{x.placement}}</td> 
        </tr> 
       </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default " data-dismiss="modal">Close</button> 
      </div> 

     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 

</div> 

<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 class="modal-title">Department Information</h3> 
      </div> 
      <div class="modal-body"> 

       <table class="table table-striped" id="tblGrid"> 
        <tr> 
         <th>Branch</th> 
         <th>Seats</th> 
         <th>Rating</th> 
         <th>Placements</th> 
        </tr> 
        <tr ng-repeat="x in dept2"> 
         <td>{{x.branch}}</td> 
         <td>{{x.seats}}</td> 
         <td>{{x.rating}}</td> 
         <td>{{x.placement}}</td> 
        </tr> 
       </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default " data-dismiss="modal">Close</button> 
      </div> 

     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 

</div> 

<script> 
$('.trigger.open').on('click', function() { 
    $('.slider').removeClass('close'); 
}); 
$('.trigger.close').on('click', function() { 
    $('.slider').addClass('close'); 
}); 
</script> 

誰かが助けてください。

Answer 1

あなたは、各モーダルに持ってインラインスタイルを削除します。

style="display: block;z-index: 9999;margin-top: 100px;"

予想通り、これらはモーダル火を削除したら。ブートストラップでそのクラスが使用され、さまざまな表示の競合が発生する可能性があるので、​​クラスを<div class="nav-for-table slider">から削除することをおすすめします。

は、機能的な例については、このBootplyを参照してください。

https://www.bootply.com/dFixsdYLpG