在右下角放置一個角度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引導對話框

回答

相關問題