增加 Bootstrap 的模态尺寸

小开

我得到了答案... 事情是，你已经覆盖的最大高度属性以及引导模式可以调整大小超过500px 的高度限制

小开

最佳答案

我也有同样的问题，你可以试试:

.modal-body {
max-height: 800px;
}

如果您注意到滚动条只出现在模态对话框的主体部分，这意味着只需要调整主体的最大高度。

小开

您需要确保它在 # myModal 上。Modal-body 元素不仅仅是 # myModal (看到一些人犯了这个错误) ，您可能还希望通过更改模态边距来适应高度的变化。

小开

使用 CSS 类(您也可以覆盖样式-不建议) :

(html)

<div class="modal-body custom-height-modal" >

(css)

.custom-height-modal {
height: 400px;
}

小开

将两种宽度和高度的方法混合在一起，你就有了一个很好的黑客技巧:

CSS:

#myModal .modal-body {max-height: 800px;}

JQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

这个是我用的。它修正了边距和滚动条的宽度和高度问题，但不会调整模式大小以适应其内容。

希望我能帮上忙！

小开

假设您的模态的 id 为 modal1，下面的 CSS 将增加模态的高度并显示任何溢出。

#modal1 .modal-body{
max-height: 700px;
overflow: visible;
}

小开

就这么定了。模态身高: 100% ，它会自动调整高度，根据您的内容，并把“最大高度”，根据您的屏幕..。

小开

使用新的 CSS3‘ vh’(或‘ vw’作为宽度)度量(将高度设置为视图端口的一小部分)使用:

.modal-body {
max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

这样，如果您正在使用响应性框架，比如 Bootstrap，那么您也可以将该设计保留在您的模态中。

小开

我尝试了上面的一些方法，因为需要设置特定的宽度和高度(用模态显示图片) ，但是上面的方法都没有帮到我，所以我决定覆盖这些样式，并在主 < div > 中添加了以下内容，其中包含 class = “模态隐藏淡入”: 例如，为模态背景的样式标签添加了一个宽度。

style="display: none; width:645px;"

然后将以下“ style”标签添加到 mode-body:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

现在就像魔法一样，我正在展示一个图像，现在它非常合适。

小开

在 Bootstrap 3中:

.modal-dialog{
width:whatever
}

小开

这对我很有效:

#modal1 .modal
{
overflow-y: hidden;
}


#modal1 .modal-dialog
{
height: 100%;
overflow-y: hidden;
}

请注意，在我的情况下，我有嵌套的模态，每个有控制，需要不同的高度时，我切换控制的显示在 嵌套模式嵌套模式，所以我不能应用的 最大高度，而是 身高: 100% 工程对我来说很好。

小开

如果希望保持在响应框架内，不要忘记可选的引导类 modal-lg和 modal-sm。并在表单下添加一个清除符，这可能有助于依赖于您的结构。

小开

我最近尝试了一下，结果是正确的: 希望这对你有帮助

 .modal .modal-body{
height: 400px;
}

这将调整您的模型的高度。

小开

你有没有试过 size 参数:

return $modal.open({
backdrop: 'static',
size: 'sm',
templateUrl: "app/views/dialogs/error.html",
controller: "errorDialogCtrl",

可选尺寸

模态有两个可选的大小，可通过修饰符类放置在。模态对话框。

默认值: 600px
小，宽度为300px
Lg: 大，宽度为900px

如果需要不同的内容，请更新 bootstarp.css

@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
.modal-xy {  // custom
width: xxxpx;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}

小开

对于 Boostrap > 4，这个方法对我很有效:

.modal-content{
width: 1200px;
}

更先进的版本:

body .modal-content{
width: 160%!important;
margin-left: -30%!important;
}

这里有一个代码:

Https://codepen.io/alfredomoralespinzon/pen/xyvoak

小开

Bootstrap 大型模型

<div class="modal-dialog modal-lg">

Bootstrap 小型模型

<div class="modal-dialog modal-sm">

小开

这里有另一个简单的方法来增加引导模式的大小:

$(".modal-dialog").css("width", "80%");

模态的宽度可以用屏幕的百分比来指定。在上面的例子中，我将它设置为我屏幕宽度的80% 。

下面是一个同样的实例:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-dialog").css("width", "90%");
});
</script>
</head>
<body>


<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
      

</div>
</div>
  

</div>


</body>
</html>