javascript - 在右下角放置一个 Angular 用户界面 Bootstrap 对话框

Question

我创建了一个 Angular UI-bootstrap 模式弹出窗口(来自 here，不是默认的 bootstrap)。

工作正常，但当然它默认居中。尽管对于我的大部分应用来说这都很好，但对于这个特定的对话框我需要它在右下角。

整个模态框都被放到了一个指令中。这是相关部分， Controller :

.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">&times;</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 类，但它似乎拒绝被覆盖。建议表示赞赏。

Answer 1

致遇到此问题的任何人:

我离得很近。我在 open 方法中正确地传递了一个 windowClass:

 var modalInstance = $modal.open({
  windowClass: 'feedback-modal',

但我忘了实际模态在里面:

.feedback-modal .modal-dialog {
   bottom: 0;
   position: absolute;
   right: 5px;
}