如何在 uibmodal 上使用自定义 CSS？如何为特定选择项自定义 uibmodal 的宽度和高度？

Question

我有各种菜单项，当单击它们中的任何一个时，它们使用相同的 uibmodal。仅对于其中一个菜单选择，我希望将 uibmodal 显示为较小的尺寸。我尝试了以下方法：

$scope.profile = function() {
            var modalInstance = $uibModal.open({
                templateUrl: 'views/modal/user_profile.html',
                controller: 'UserController',
                scope: $scope,
                windowClass: 'userFileWindow',
                size: 'sm'
            });
        };

大小：sm 没有帮助。它显示默认大小作为任何其他菜单选择，如何修改此 uibmodal 的宽度和高度？

我是 Angular 的新手，如果这是一个疯狂的问题，我很抱歉。谢谢。

Answer 1

自定义 uibModal 全屏 CSS&JS 代码

JS：

var modalInstance = $uibModal.open({
                    animation: OrdersController.animationsEnabled,
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: 'GENERAL/Orders/orders.dialog.html',
                    controller: 'OrdersDialogController',
                    controllerAs: 'vm',
                    size: size, //param
                    backdrop: 'static',
                    keyboard: true,
                    backdropClick: false,
                    windowTopClass: '',
                    windowClass: 'my-modal', //maybe param
                    resolve: {
                        data: function () {
                            return data = { row: row, edit: type, order: vm.main, orderDetail: vm.detail };
                        }
                    }
                })

CSS：

.my-modal .modal-dialog {
    width: 100% !important;
    padding: 0px;
    margin: 0px;
}

.my-modal .modal-content {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 0px;
    margin: 0px;
}

.my-modal .modal-footer {
    position: absolute;
    bottom: 0px;
    width:100%;
    padding:2px !important;
}

参考：

• How do I increase modal width in Angular UI Bootstrap?
• How to use custom css on uibmodal?
• Set property Id to a uibModal

Answer 2

为什么不通过css设置大小。

JSFiddle Demo

CSS：

.userFileWindow .modal-content {
  width: 500px;
  height:500px;
}
.userFileWindow .modal-footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

参考：

1. set modal size

Answer 3

向前一步，如何将 css 类添加到这个 uibModal 中？

.userFileWindow {

    .modal-sm{
        width: 50%;
        height: 50%;
}
}