如何在bootstrap模式对话框中仅为模态体添加滚动条

时间:2014-09-16 16:30:56

标签: css twitter-bootstrap

我有以下元素:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

它显示了类似这样的模态对话框,基本上,它将滚动条放在整个模态对话框周围,而不是包含我试图显示的内容的模态体。

图片看起来像这样:

enter image description here

如何仅在模态体周围获得滚动条? 我尝试将style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"分配给modal-body,但它没有用。

15 个答案:

答案 0 :(得分:228)

您必须设置height的{​​{1}}并将其.modal-body。同时将overflow-y: auto溢出值重置为.modal-dialog

参见工作样本:

http://www.bootply.com/T0yF2ZNTUd

initial

答案 1 :(得分:96)

如果您只支持IE 9或更高版本,则可以使用可以平滑扩展到窗口大小的CSS。您可能需要调整“200px”,具体取决于页眉或页脚的高度。

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

答案 2 :(得分:25)

使用联合解决方案解决问题@carlos calla和@jonathan marston。

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

答案 3 :(得分:10)

添加Carlos Calla的好答案。

必须设置.modal-body的高度,但您可以使用媒体查询来确保它适合屏幕大小。

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

答案 4 :(得分:10)

可选:如果您不希望模式超出窗口高度并在.modal-body中使用滚动条,则可以使用此响应式解决方案。 请在此处查看有效的演示:http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

答案 5 :(得分:4)

我知道这是一个古老的话题,但这可能有助于其他人。

我能够通过固定模态对话框元素位置来使主体滚动。因为我永远不会知道浏览器窗口的确切高度,所以我采用了我确定的信息,页眉和页脚的高度。然后我能够使模态体元素的顶部和底部边缘与这些高度相匹配。然后产生了我正在寻找的结果。我把一个小提琴放在一起展示我的作品。

另外,如果你想要一个全屏对话框,只需取消注释宽度:auto;在.modal-dialog.full-screen部分内。

https://jsfiddle.net/lot224/znrktLej/

这是我用来修改引导程序对话框的CSS。

@Component({
  selector: 'my-app',
  template: `
    <form #roomForm="ngForm">
       <input type="text" [pattern]="ssnRegex" [(ngModel)]="user.ssn" name="ssn" required #ssn="ngModel">
      {{ssn.valid}}
    </form>
  `,
})
export class App {
  constructor() {
    this.user = {ssn: ""};
    this.ssnRegex = "[A-Za-z]{3}" // Only 3 letters allowed for example
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  providers: [SessionService],
  bootstrap: [ App ]
})
export class AppModule {}

答案 6 :(得分:4)

或者更简单一点,你可以先放置你的标签,然后放到css类。

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

答案 7 :(得分:2)

对于Bootstrap版本> = 4.3

Bootstrap 4.3为模态添加了新的内置滚动功能。如果内容的大小会使页面滚动,则仅使 modal-body 内容滚动。要使用它,只需将类 modal-dialog-scrollable 添加到具有 modal-dialog 类的同一div中。

这里是一个例子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

答案 8 :(得分:1)

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

max-heightvh一起用作modal-body上的单位或modal-body内的包装div。当用户调整窗口大小时,这将自动调整modal-body或包装div(在此示例中)的高度。

vh是长度单位,表示视口高度的视口大小的1%。

vh单位的

Browser compatibility图表。

示例:https://jsfiddle.net/q3xwr53f/

答案 9 :(得分:1)

在最新的引导程序版本中,有一个类使模态主体可滚动。

.modal-dialog-scrollable .modal-dialog

Bootstrap modal link for modal body scrollable content

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

答案 10 :(得分:0)

一个简单的js解决方案,用于设置与身体高度成比例的模态高度:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

身体的高度必须是100%:

html, body {
    height: 100%;
    min-height: 100%;
}

我将模态身高设置为身体的80%,这当然可以定制。

希望它有所帮助。

答案 11 :(得分:0)

对我有用的是将高度设置为100%,自动溢出 希望这会有所帮助

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

答案 12 :(得分:0)

您必须在模态主体中设置一个高度,它可以是%vh或calc:

modal-body {
    height: 80vh;
    overflow-x: auto;
}

modal-body {
    height: calc(100vh - 5em);
    overflow-x: auto;
}

就我而言: enter image description here

答案 13 :(得分:0)

这是我网站上完整的 Sass 重写(仍在构建中,准备就绪后会在此处添加)

它是 100% 移动响应和适合屏幕(仅当内容足够大时,否则宽度和高度将适合内容,所以是的,它很灵活):

  • 大于 576 像素 (sm) 的屏幕上的间距为 1.75rem(4 边相等)
  • 小于 576 像素的屏幕上的间距为 0.5rem

对于灵活和可滚动的 modal-body,用 required 注释的行是您需要的最少代码。

.modal-header,
.modal-footer {
  border: none !important;
}

.modal-dialog {
  height: 100% !important; // required
  margin: 0 0.5rem !important;
  padding: 0.5rem 0 !important;
  overflow-y: initial !important; // required

  @media (min-width: $sm) {
    margin: 0 auto !important;
    padding: 1.75rem 0 !important;
    max-width: initial !important; // overwrite default max-width
    width: fit-content !important; // flexible width
    min-width: 500px !important; // makes it fat enough by default
  }
}

.modal-content {
  max-height: 100% !important; // required
}

.modal-body {
  padding-top: 0 !important;
  overflow-y: auto !important; // required
}

答案 14 :(得分:0)

如果您使用的是引导程序 4.5 或更高版本,请添加类 modal-dialog-scrollable

其他

.modal-body{
    height :100%;
    over-flow-y:auto;
}