Question

到目前为止，我已经完成了这个

的模态宽度

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

并将其模态lg属性覆盖为

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

它很好，但现在我需要的是拥有多个自定义大小的模态在同一个屏幕上。这是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

通过添加到您的CSS来调整模态：

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

然后将类添加到属性windowClass，在其中实例模式

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

Answer 2

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

如何在角度UI引导程序中自定义模态宽度

2 个答案: