Question

我正在尝试更改模态窗体的大小，或者更确切地说 - 让它响应我在那里渲染的内容。我正在使用它来呈现一个表单，并且如果需要我更喜欢处理滚动。

我渲染的表单可能需要另外50px - 只是缺少按钮。

所以我尝试覆盖application.css.scss文件中的.modal样式（使用Rails 3.2），但是max-height和overflow declerations似乎被覆盖了。

有什么想法吗？

Answer 1

我遇到了完全相同的问题，你可以试试：

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

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

Answer 2

在Bootstrap 3中：

.modal-dialog{
  width:whatever
}

Answer 3

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

Answer 4

使用新的CSS3'vh'（或'vw'代表宽度）测量（将高度设置为视口的一小部分）使用：

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

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

Answer 5

混合使用宽度和高度的两种方法，你就有了很好的黑客攻击：

<强> CSS：

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

<强> JQuery的：

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

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

希望我有所帮助！

Answer 6

使用CSS类（您也可以覆盖样式 - 不建议）：

（HTML）

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

（CSS）

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

Answer 7

我得到了答案......问题是你已经覆盖了max-height属性以及bootstrap模态可以调整大小超过500px高度限制

Answer 8

只需设置“.modal-body”高度：100％它会根据你的内容自动调整高度，并根据你的屏幕设置“max-height”......

Answer 9

Bootstrap Large模型

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

Bootstrap Small模型

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

Answer 10

对于Boostrap> 4，这对我有用：

.modal-content{
  width: 1200px;
}

更高级的版本：

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

这是一个Codepen：

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Answer 11

您是否尝试过尺寸参数：

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

可选尺寸

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

默认值：600px
sm：小，宽度为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;
  }
}

Answer 12

这是增加引导程序模态大小的另一种简单方法：

$(".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>

Answer 13

I was recently trying this and got this correct: Hope this will be helpful

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

This will adjust height of your model.

Answer 14

如果您想保留在响应式框架内，请不要忘记可选的引导类modal-lg和modal-sm。并在表单下方添加一个clearfix，这可能有助于您的结构。

Answer 15

这对我有用：

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

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

请注意，在我的情况下，我有嵌套模态，当我在嵌套模态内切换控件的显示时，每个控件都需要不同的高度，所以我无法应用 max-height ，而身高：100％对我很有用。

Answer 16

尝试上面的一些需要设置宽度和高度的特定尺寸（以模态显示图像）并且由于没有上面帮助我，我决定覆盖样式并将以下内容添加到主＆lt; div>其中有class =“modal hide fade in”：即为模式背景的样式标记添加了一个宽度。

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

然后将以下'style'标签添加到模态体：

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

现在就像一个魅力，我正在显示一个图像，现在它非常适合。

Answer 17

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

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

增加Twitter Bootstrap的模态大小

17 个答案: