自定义AngularJS Modal弹框大小的方法

使用AngularJS Modal弹出框功能，指定弹出框大小的方法为：

1：可以单独设置size属性，其中size的可选为：lg:最大；md:中等；sm：最小；

2：有时候通过设置size属性也不能满足要求，比如设置成了lg，但是还想把弹框设置的更大或自定义宽度。这时候就需要同时设置windowClass属性和size属性。为弹框所在的Window指定一个自定义属性。

 

示例：

$scope.detailPopup = function (htmlTemplatePath, jsPathArray) {
 
    //打开预览弹框
    $scope.orgAddPerModal = $uibModal.open({
        templateUrl: htmlTemplatePath,
        scope: $scope,
        backdrop: 'static',
        keyboard: false,
        windowClass: "positionLabelEditModal",
        size: 'lg',
        resolve: {
            loadPlugin: function($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    files: jsPathArray
                }]);
            }
        }
    });
}

 

AngularJS Modal默认会为弹框增加一个.modal-dialog样式，我们在在弹框页面中（htmlTemplatePath所指定的html页面），定义这个windowClass所指定的样式，并覆盖默认的.modal-dialog样式。

 

示例：定义positionLabelEditModal下面modal-dialog的样式。

<style>
    .positionLabelEditModal .modal-dialog{
        width: 1250px;
        height: 500px;
        min-width: 650px;
        max-width: 1400px;
        top: 10%;
    }
</style> 

这样就能覆盖弹框默认的.modal-dialog样式。