我创建了一个Angular UI-bootstrap模式弹出窗口(来自here,而不是默认的bootstrap)。
工作正常,但当然默认居中。虽然对于我的大多数应用程序来说这很好,但对于这个特定的对话框,我需要在右下角。
整个模态已被置于指令中。这是相关部分,控制器:
.controller('FeedbackController', function($scope, $attrs, $modal) {
var _this = this;
_this.click = function() {
var modalInstance = $modal.open({
windowClass: 'feedback-modal',
template: '' +
'<div class="modal-header">' +
'<button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
'<h3 class="modal-title">Feedback</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="form-group">' +
'<label>Please rate your experience</label><br>' +
'<input type="radio" class="hidden-radio" name="rating" id="happy" ng-model="$parent.rating" ng-value="smile"> ' +
'<label for="happy">' +
'<img src="/assets/img/emoji-smile.png" />' +
'</label>' +
'<input type="radio" class="hidden-radio" name="rating" id="sad" ng-model="$parent.rating" ng-value="frown"> ' +
'<label for="sad">' +
'<img src="/assets/img/emoji-frown.png" />' +
'</label>' +
'</div>' +
'<div class="form-group">' +
'<label>Comments</label>' +
'<textarea class="form-control" rows="3" ng-model="comment"></textarea>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button class="btn btn-primary" ng-click="ok()">OK</button>' +
'</div>',
controller: function($scope, $http, $log, $state, $modalInstance) {
$scope.ok = function() {
$log.debug('FEEDBACK: ', $state.current.name, $state.params, $scope.comment, $scope.rating);
$http.post('feedback/url/here', {
stateName: $state.current.name,
statParams: $state.params,
comment: $scope.comment,
rating: $scope.rating,
type: $scope.type
});
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function() {
return $scope.items;
}
}
});
};
});
你可以看到我为模态窗口创建了一个新的css类,但它似乎拒绝被覆盖。建议表示赞赏。
答案 0 :(得分:4)
对于遇到此事的任何人:
我太近了。我在open方法中正确传递了一个windowClass:
var modalInstance = $modal.open({
windowClass: 'feedback-modal',
但我忘了实际模式
.feedback-modal .modal-dialog {
bottom: 0;
position: absolute;
right: 5px;
}