如何在 angular UI bootstrap 中自定义模态宽度

Question

到目前为止，我已经完成了模态宽度的自定义

     var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'AddProtocolElement',
        controller: 'ProtocolElementDialogController',
        backdrop: 'static',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

并将其 modals lg 属性覆盖为

    .modal-lg{
    width:1100px !important
    }

很好，但现在我需要的是拥有多个自定义 lg 大小的模态框在同一屏幕上。这里是HTMl

    <script type="text/ng-template" id="AddProtocolElement">
                        <form name="elementForm" id="elementForm" action="#" novalidate class="form-horizontal" role="form">
                            <div class="modal-header ">
                                <h3 class="modal-title">{{formHeading}} Protocol Element</h3>
                            </div>
                            <div class="modal-body">

                            <!-- here goes the body -->
                            </div>



                            <div class="modal-footer ">
                                <!-- here goes the footer -->        

                            </div>

                        </form>

Answer 1

在 JavaScript 中尝试 width = 150px。这应该在没有 jQuery.

的情况下工作

Answer 2

要调整模态并添加到您的 css:

.adjustwidth .modal-dialog{
   width: 5000px; 
  }

然后将 class 添加到属性 windowClass，您在其中实例化模态

var modalInstance = $modal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'AddProtocolElement',
    controller: 'ProtocolElementDialogController',
    backdrop: 'static',
    windowClass: 'adjustwidth',
    size: 'lg',
    resolve: {
        items: function () {
            return $scope.items;
        }
    }
});

如何在 angular UI bootstrap 中自定义模态宽度

how to customize modal width in angular UI bootstrap

angularjs

angular-ui-bootstrap