我正在创建一个模态：
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
});
有没有办法增加它的宽度？
【问题讨论】：
标签： angularjs angular-ui-bootstrap
我使用这样的 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
另一种简单的方法是使用 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>
【讨论】：
您可以为 .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'
});
【讨论】：
还有另一种方法，您不必覆盖 uibModal 类并在需要时使用它们：您使用自己的大小类型（如“xlg”）调用 $uibModal.open 函数，然后定义一个名为“modal-xlg”的类" 如下所示：
.modal-xlg{
width:1200px;
}
调用 $uibModal.open 为：
var modalInstance = $uibModal.open({
...
size: "xlg",
});
这将起作用。 因为无论您作为 size bootstrap 传递的任何字符串都将与“modal-”一起使用，这将扮演窗口类的角色。
【讨论】：
当我们打开一个模态框时，它接受大小作为参数：
它大小的可能值：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 接管模板更容易。我已将注释的 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>
现在您可以添加任何您想要的额外类，或者根据需要简单地更改宽度/高度大小。
我进一步将它包含在一个包装器指令中，从现在开始这应该是微不足道的。
干杯。
【讨论】：
我使用 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'
});
【讨论】：
您可以使用 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'
});
【讨论】：
如果您只想使用默认的大尺寸，可以添加“modal-lg”：
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
windowClass: 'modal-lg'
});
【讨论】：
在模态对话框中使用最大宽度来表示角度 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。
【讨论】：