2016-09-07 19 views
1

在我的模态视图中有一个问题在html页面中。每当我加载页面时都会发生。 Modal总是从html页面的底部开始。但仅在每次装载时发生一次。我该如何解决这个问题。我究竟做错了什么。帮助将不胜感激。模态在开始时打开不正确

这里是我的html

<div class="form-group"> 
    <div class="col-lg-12 co-md-9"> 
    <div class="row"> 
     <table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100"> 
     <thead style="text-align:match-parent"> 
      <tr> 
      <th rowspan="1" colspan="1" style="width:100px"> 
       <a href="javascript:void(0)" class="table-links" ng-click="sortType='Name'; sortReverse=!sortReverse"> 
       <span ng-show="sortType != 'Name'" class="fa fa-unsorted"></span> 
       <span ng-show="sortType == 'Name' && !sortReverse" class="fa fa-sort-asc"></span> 
       <span ng-show="sortType == 'Name' && sortReverse" class="fa fa-sort-desc"></span> Customer Name 
       </a> 
      </th> 
      <th rowspan="1" colspan="1" style="width:100px">Email</th> 
      <th rowspan="1" colspan="1" style="width:100px">Mobile</th> 
      <th rowspan="1" colspan="1" style="width:100px">Company</th> 
      <th style="width:50px">Actions</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="customer in filteredDetails = (customerDetails | filter : Search | orderBy:sortType:sortReverse | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage)" style="text-align:match-parent"> 
      <td>{{customer.Name}}</td> 
      <td>{{customer.Email}}</td> 
      <td>{{customer.Telephone}}</td> 
      <td>{{customer.Company}}</td> 
      <td style="text-align:center"> 
       <a href="javascript:void(0)" class="btn btn-primary btn-alt btn-xs" type="button" ng-click="editDetails(customer)"><span class="glyphicon glyphicon-edit"></span></a> 
       <a href="javascript:void(0)" class="btn btn-danger btn-alt btn-xs" type="button"><span class="glyphicon glyphicon-trash"></span></a> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
     <div ng-show="filteredDetails.length==0"> 
     No results found. 
     </div> 
     <div class="row"> 
     <div class="col-md-8 col-xs-12"> 
      <uib-pagination total-items="totalCustomers" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination> 
     </div> 
     </div> 
     <!--Modal: edit--> 
     <div id="cusEditModal" class="modal fade modal-style2 in" data-backdrop="static" data-keyboard="false" role="dialog" tabindex="-1" style="position:center" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog modal-dialog-center" style="width:700px" role="document"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="fa fa-times-circle-o"></span></button> 
       <h4 class="modal-title"><i class="round round-lg grey"><span class="icons8-create-new s20"></span></i> Edit Customer Details</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group"> 
       <label class="col-lg-2 col-md-3 control-label" for="">Customer Id</label> 
       <div class="col-lg-10 col-md-9"> 
        <input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Id" disabled /> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label class="col-lg-2 col-md-3 control-label" for="">Name</label> 
       <div class="col-lg-10 col-md-9"> 
        <input type="text" class="form-control" name="cname" ng-model="modalEditDetails.Name" /> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label class="col-lg-2 col-md-3 control-label" for="">Email</label> 
       <div class="col-lg-10 col-md-9"> 
        <input type="text" class="form-control" name="cemail" ng-model="modalEditDetails.Email" /> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label class="col-lg-2 col-md-3 control-label" for="">Telephone</label> 
       <div class="col-lg-10 col-md-9"> 
        <input type="text" class="form-control" name="ctel" ng-model="modalEditDetails.Telephone" /> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label class="col-lg-2 col-md-3 control-label" for="">Company</label> 
       <div class="col-lg-10 col-md-9"> 
        <input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Company" /> 
       </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-default mr5 mb10" data-dismiss="modal" type="button">Close</button> 
       <button class="btn btn-warning mr5 mb10" type="button" ng-click="EditCustomer()">Edit</button> 
      </div> 
      </div> 
     </div> 
     </div> 
     <!--Modal .End--> 
    </div> 
    </div> 
</div> 

这是截图,当网页加载完毕后,打开模态被点击行的时候。 enter image description here

当我关闭并重新打开模态时正确渲染。 enter image description here

新增的功能editDetails

$scope.editDetails = function(details) { 
    $scope.modalEditDetails = details; 
    $("#cusEditModal").modal("show"); 
} 
})(); 
+0

发布您的'editDetails(customer)'函数。 – DiegoSalazar

+1

另外,看看是否在''div id =“cusEditModal”class =“modal fade modal-style2 in''移除类fade'和/或'in'做任何事情。 – DiegoSalazar

+0

@ diego.greyrobot嗨添加了功能:) –

回答

0

离开这里这种情况下,它可以帮助别人。

Bootstrap模态可以选择使其开启动画。在你的情况下,你有“淡入淡出”和“进入”类启用此选项。更改/删除任何这些应该会有所帮助。这可能是由于js在插入DOM时未能正确计算出模式高度,并且将它放得太低。