在右下角放置一个角度UI引导对话框

我已经创建了一个Angular UI引导模式弹出窗口（来自here，而不是默认的引导窗口）。在右下角放置一个角度UI引导对话框

工作正常，但它当然是默认居中。虽然对于我的大部分应用程序来说都没问题，但对于此特定对话框，我需要将它放在右下角

整个模态已被放入指令。下面是相关的部分，控制器：

.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类，但它似乎拒绝被覆盖。建议感激。

来源

2015-05-19 Steve

没什么特别的你的问题，但我强烈建议更换把你的HTML放到一个单独的文件中，并将其与templateUrl而不是模板一起使用。它会更清晰可读。 – Okazari

表示同意。原来我是针对错误的div。我指定了'feedback-modal'类，但没有意识到我需要定位它的div _inside_，'.modal-dialog'。现在工作。 – Steve

很高兴帮助你。 – Okazari

对任何人来说这个：

我是如此接近。我正确地传递一个windowClass在打开的方法：

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

但我忘了实际模式是内是：

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

来源

2015-05-19 17:39:47 Steve

在右下角放置一个角度UI引导对话框

回答

相关问题