如何增加Angular UI Bootstrap中的模态宽度？
我正在创build一个模式：
var modal = $modal.open({ templateUrl: "/partials/welcome", controller: "welcomeCtrl", backdrop: "static", scope: $scope, }); 有没有办法增加它的宽度？
我使用类似的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; }); };
另一个简单的方法是使用2个预制尺寸，并在您的HTML中调用函数时将它们作为parameter passing。 使用：'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>
您可以指定.modal-lg类的自定义宽度，专门为您的popup窗口提供更宽的视口分辨率。 这里是如何做到这一点：
CSS：
.my-modal-popup{ @media (min-width: 1400px){ .modal-lg { width: 1308px; } } }
JS：
var modal = $modal.open({ animation: true, templateUrl: 'modalTemplate.html', controller: 'modalController', size: 'lg', windowClass: 'my-modal-popup' });
当我们打开一个模式，它接受大小作为参数：
它的大小可能的值： 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>
我发现从Bootstrap-ui接pipe模板比较容易。 我已经留下了评论的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>
修改你的对话框模板（注意包含“模态对话”类和“模态内容”类的包装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并开火。
<button ng-controller="myTest" class="btn btn-default" type="button" ng-click="openFlexModal();">Open Flex Modal!</button>
现在你可以添加你想要的任何额外的类，或者根据需要改变宽度/高度尺寸。
我将其进一步封装在一个封装指令中，从这个angular度来看这应该是微不足道的。
干杯。
我使用Dmitry Komin解决scheme解决了这个问题，但是使用了不同的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' });
你可以使用angular度模态的大小属性以非常简单的方式做到这一点。
var modal = $modal.open({ templateUrl: "/partials/welcome", controller: "welcomeCtrl", backdrop: "static", scope: $scope, size:'lg' // you can try different width like 'sm', 'md' });
还有另外一种方法，你不需要覆盖uibModal类并在需要的时候使用它们：你可以调用$ uibModal.open函数，使用你自己的大小types，例如“xlg”，然后定义一个名为“modal-xlg”的类，如下所示：
.modal-xlg{ width:1200px; }
调用$ uibModal.open作为：
var modalInstance = $uibModal.open({ ... size: "xlg", });
这将工作。 因为无论你作为size bootstrap传递的string是否与“modal-”一致，这都将起到类窗口的作用。
如果你想只用默认的大尺寸，你可以添加'modal-lg'：
var modal = $modal.open({ templateUrl: "/partials/welcome", controller: "welcomeCtrl", backdrop: "static", scope: $scope, windowClass: 'modal-lg' });
