如何在Angular UI Bootstrap中增加模态宽度？

Question

我正在创建一个模态:

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                });

有没有办法增加它的宽度？

Answer 1

我使用像这样的css类来定位模态对话框类:

.app-modal-window .modal-dialog {
  width: 500px;
}

然后在调用模态窗口的控制器中,设置windowClass:

    $scope.modalButtonClick = function () {
        var modalInstance = $modal.open({
            templateUrl: 'App/Views/modalView.html',
            controller: 'modalController',
            windowClass: 'app-modal-window'
        });
        modalInstance.result.then(
            //close
            function (result) {
                var a = result;
            },
            //dismiss
            function (result) {
                var a = result;
            });
    };

Answer 2

另一种简单的方法是使用2个预制尺寸,并在调用html中的函数时将它们作为参数传递.使用:'lg'用于宽度为900px'sm'的大型模式,对于宽度为300px的小模态或不传递参数,使用默认大小600px.

示例代码:

$scope.openModal = function (size) {
var modal = $modal.open({
                templateUrl: "/partials/welcome",
                controller: "welcomeCtrl",
                backdrop: "static",
                scope: $scope,
                size: size,
            });
modal.result.then(
        //close
        function (result) {
            var a = result;
        },
        //dismiss
        function (result) {
            var a = result;
        });
};

在html中我会使用如下内容:

<button ng-click="openModal('lg')">open Modal</button>  

Answer 3

您可以为.modal-lg类指定自定义宽度,专门用于弹出窗口以获得更宽的视口分辨率.这是怎么做的:

CSS:

@media (min-width: 1400px){

   .my-modal-popup .modal-lg {
       width: 1308px;
   }       

}

JS:

var modal = $modal.open({
    animation: true,
    templateUrl: 'modalTemplate.html',
    controller: 'modalController',
    size: 'lg',
    windowClass: 'my-modal-popup'
});

Answer 4

当我们打开一个模态时,它接受大小作为参数:

它的可能值大小: sm, md, lg

$scope.openModal = function (size) {
var modal = $modal.open({
      size: size,
      templateUrl: "/app/user/welcome.html",
      ...... 
      });
}

HTML:

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('sm')">Small Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('md')">Medium Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('lg')">Large Modal</button>

如果您想要任何特定尺寸,请在模型HTML上添加样式:

<style>.modal-dialog {width: 500px;} </style>

Answer 5

还有另外一种方法,你不必覆盖uibModal类并在需要时使用它们:用你自己的大小类型调用$ uibModal.open函数,如"xlg",然后你定义一个名为"modal-xlg"的类,如下所示:

.modal-xlg{
   width:1200px;
}

将$ uibModal.open称为:

 var modalInstance = $uibModal.open({
                ...  
                size: "xlg",
            });

这将有效.因为你传递的任何字符串作为大小引导程序将使用"modal-"来表示它,这将扮演窗口类的角色.