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>
新增的功能editDetails
$scope.editDetails = function(details) {
$scope.modalEditDetails = details;
$("#cusEditModal").modal("show");
}
})();
发布您的'editDetails(customer)'函数。 – DiegoSalazar
另外,看看是否在''div id =“cusEditModal”class =“modal fade modal-style2 in''移除类fade'和/或'in'做任何事情。 – DiegoSalazar
@ diego.greyrobot嗨添加了功能:) –