在右下角放置一個角度ui引導對話框

Question

我創建了一個Angular UI-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">&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;
}