Question

<div id="responsive-modal3"   class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; "  data-keyboard="false" data-backdrop="static"    ng-init = "populateBidSpocData()" >
   <div class="modal-dialog modal-lg">
      <div class="modal-content" style="margin-top:55px;">
         <div class="modal-header" style="background:#003c4c;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"  style="color:#FFF;">Check Availibility</h4>
         </div>
         <div class="modal-body">
            <table class="table table-hover hd-bg-table table-bordered">
               <thead>
               <tbody>
               <thead>
                  <tr>
                     <th class="text-center" style="vertical-align:middle" rowspan="2"></th>
                     <th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
                     <th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
                     <th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
                  </tr>
                  <tr>
                     <th><b>Initiation</b></th>
                     <th><b>SPOC Assignment</b></th>
                     <th><b>Participant Contribution</b></th>
                     <th><b>Review</b></th>
                     <th><b>Closure</b></th>
                  </tr>
               </thead>
               <tr ng-repeat="x in infoWithStatus track by $index">
                  <td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
                  <td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
                  <td>
                     <select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
                        <option value="">Please select a role</option>
                     </select>
                  </td>
                  <td>{{x.count1}}</td>
                  <td>{{x.count2}}</td>
                  <td>{{x.count3}}</td>
                  <td>{{x.count4}}</td>
                  <td>{{x.count5}}</td>
               <tr/>
               </tbody>
               </thead>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
            <button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" >Close</button>
         </div>
      </div>
   </div>
</div>

在这里，我们可以看到我在点击时调用一个函数，其中包含一些验证。但是，在验证完成后，它会关闭模型。但是，我希望模型在验证后仍然可以打开。

Answer 1

你应该删除

data-dismiss="modal"

从这里

<button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>

在你的validate(infoWithStatus)中，如果验证成功，你应该关闭模态。使用下面的代码隐藏模态

$("#responsive-modal3").modal("hide");

我正在使用bootstrap模型。但是当我在js方面调用一个函数时它会关闭，我想让它打开

1 个答案: