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

Posted 2023-03-06

【中文标题】如何在 Angular UI Bootstrap 中增加模态宽度？

【英文标题】：How do I increase modal width in Angular UI Bootstrap?

【发布时间】：2014-02-14 05:04:21

【问题描述】：

我正在创建一个模态：

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

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

【问题讨论】：

How can I change the width of a Bootstrap 3 modal in IE8?的可能重复

您可以随时使用 css 更改宽度。

【参考方案1】：

我使用这样的 css 类来定位 modal-dialog 类：

.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;
            );
    ;

【讨论】：

这个太好了，不知道也得套用.modal-dialog

Css 应该同时应用在 .app-modal-window 和 .modal-dialog 上，所以：.app-modal-window, .modal-dialog width: 500px;

@Alexander 不是根据我的测试，给模态对话框的父元素添加宽度搞砸了。

@RobJacobs 抱歉，我没有提到我使用 boostrap 2.3.2。我想这就是我应该为 .app-modal-window 和 .modal-dialog 设置宽度的原因

@ZeroDistraction 定义的 windowClass 被添加到 modalWindow 指令中的元素类属性 - 编译阶段之后的链接函数，因此'C'指令不会被编译。

【参考方案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>  

【讨论】：

我发现在大多数情况下，我只需要预制尺寸。 +1 不必执行一些自定义 css！

就像一个魅力。感谢您澄清现有的内置 css 大小。

【参考方案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'
);

【讨论】：

解决方案很好，但 CSS 语法对我来说不正确。我必须调整css。

【参考方案4】：

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

.modal-xlg
   width:1200px;

调用 $uibModal.open 为：

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

这将起作用。 因为无论您作为 size bootstrap 传递的任何字符串都将与“modal-”一起使用，这将扮演窗口类的角色。

【参考方案5】：

当我们打开一个模态框时，它接受大小作为参数：

它大小的可能值：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>

【参考方案6】：

我发现从 Bootstrap-ui 接管模板更容易。我已将注释的 HTML 留在原处以显示我所做的更改。

覆盖他们的默认模板：

<script type="text/ng-template" id="myDlgTemplateWrapper.html">
    <div tabindex="-1" role="dialog" class="modal fade" ng-class="in: animate" 
         ng-style="'z-index': 1050 + index*10, display: 'block'" ng-click="close($event)"> 
        <!-- <div class="modal-dialog"
            ng-class="'modal-sm': size == 'sm', 'modal-lg': size == 'lg'"
            >
            <div class="modal-content"  modal-transclude></div>
        </div>--> 

        <div modal-transclude>
            <!-- Your content goes here -->
        </div>
    </div>
</script>

修改您的对话框模板（注意包含“modal-dialog”类和“modal-content”类的包装器 DIV）：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-dialog extraDlgClass"
         style="width: width; max-width: maxWidth; min-width: minWidth; ">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h3>I am a more flexible modal!</h3>
            </div>
            <div class="modal-body"
                 style="min-height: minHeight; height: height; max-height maxHeight; ">
                <p>Make me any size you want</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</script>

然后使用您希望更改的任何 CSS 类或样式参数调用模态（假设您已经在其他地方定义了“app”）：

<script type="text/javascript">
    app.controller("myTest", ["$scope", "$modal", function ($scope, $modal)
    
        //  Adjust these with your parameters as needed

        $scope.extraDlgClass = undefined;

        $scope.width = "70%";
        $scope.height = "200px";
        $scope.maxWidth = undefined;
        $scope.maxHeight = undefined;
        $scope.minWidth = undefined;
        $scope.minHeight = undefined;

        $scope.open = function ()
        
            $scope.modalInstance = $modal.open(
            
                backdrop: 'static',
                keyboard: false,
                modalFade: true,

                templateUrl: "myModalContent.html",
                windowTemplateUrl: "myDlgTemplateWrapper.html",
                scope: $scope,
                //size: size,   - overwritten by the extraDlgClass below (use 'modal-lg' or 'modal-sm' if desired)

                extraDlgClass: $scope.extraDlgClass,

                width: $scope.width,
                height: $scope.height,
                maxWidth: $scope.maxWidth,
                maxHeight: $scope.maxHeight,
                minWidth: $scope.minWidth,
                minHeight: $scope.minHeight
            );

            $scope.modalInstance.result.then(function ()
            
                console.log('Modal closed at: ' + new Date());
            ,
            function ()
            
                console.log('Modal dismissed at: ' + new Date());
            );
        ;

        $scope.ok = function ($event)
        
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.close("OK");
        ;

        $scope.cancel = function ($event)
        
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.dismiss('cancel');
        ;

        $scope.openFlexModal = function ()
        
            $scope.open();
        

    ]);
</script>

添加一个“打开”按钮并开火。

    <button ng-controller="myTest" class="btn btn-default" type="button" ng-click="openFlexModal();">Open Flex Modal!</button>

现在您可以添加任何您想要的额外类，或者根据需要简单地更改宽度/高度大小。

我进一步将它包含在一个包装器指令中，从现在开始这应该是微不足道的。

干杯。

【参考方案7】：

我使用 Dmitry Komin 解决方案解决了这个问题，但使用不同的 CSS 语法使其直接在浏览器中工作。

CSS

@media(min-width: 1400px)
    .my-modal > .modal-lg 
        width: 1308px;
    

JS同理：

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

【参考方案8】：

您可以使用 angular 的 size 属性以非常简单的方式做到这一点 模态的。

var modal = $modal.open(
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                    size:'lg' // you can try different width like 'sm', 'md'
                );

【参考方案9】：

如果您只想使用默认的大尺寸，可以添加“modal-lg”：

var modal = $modal.open(
          templateUrl: "/partials/welcome",
          controller: "welcomeCtrl",
          backdrop: "static",
          scope: $scope,
          windowClass: 'modal-lg'
);

【参考方案10】：

在模态对话框中使用最大宽度来表示角度 5

.mod-class .modal-dialog 
    max-width: 1000px;

并像其他人推荐的那样使用windowClass，TS eg：

this.modalService.open(content,  windowClass: 'mod-class' ).result.then(
        (result) => 
            // this.closeResult = `Closed with: $result`;
         , (reason) => 
            // this.closeResult = `Dismissed $this.getDismissReason(reason)`;
);

另外，我必须将 css 代码放在全局样式中 > styles.css。