bootstrap模态框加滚动条

1. 前言

Bootstrap是一个开源的前端框架，可以用于快速构建响应式的网站和Web应用程序。 Bootstrap具有众多的组件，可以轻松地构建出各种样式的页面元素，其中之一就是模态框（Modal）。模态框是一种常用的弹出式窗口，可以用于消息展示、提示信息、表单填写等场景。 本文将介绍如何使用Bootstrap模态框并且给模态框添加滚动条功能。

2. Bootstrap模态框介绍

Bootstrap模态框是一种灵活、可定制且易于使用的对话框。它们被用于许多场景，例如：展示重要信息、展示表单、请求用户输入等等。 Bootstrap模态框的基本示例如下所示：

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

2.1 模态框使用说明

Bootstrap模态框需要通过JavaScript代码触发，通过设置data-*属性来确定对应的目标元素（即模态框）。

data-toggle: 表示为触发模态框的事件类型，一般为click

data-target: 表示为模态框的目标元素选择器，例如#exampleModal

在上面的代码中，点击按钮会触发模态框打开，并且可以通过按钮的data-target属性来指定弹出的模态框的id。

2.2 模态框结构说明

Bootstrap模态框的结构由三个部分组成：头部、主体和脚部。

头部：模态框头部包含了一个可自定义的标题，还可以在右上角添加一个关闭按钮。

主体：模态框主体可以包含任意数量的内容，例如文本、图片、表单等。

脚部：模态框脚部通常包含了一些按钮，用于关闭模态框或执行某些操作。

三个部分都是使用标准的HTML结构来构建的，可以方便地对其进行自定义样式，并且可以在文档中自由的嵌套其他HTML元素。

3. 给Bootstrap模态框添加滚动条功能

3.1 模态框中的滚动条

在某些情况下，模态框可能会包含较多的内容，如果不限制模态框的高度，可能会导致模态框超出页面的可视区域，这时候就需要设置模态框的高度，并且给模态框添加滚动条功能。

要给Bootstrap模态框添加滚动条，我们需要先创建一个具有固定高度和固定宽度的容器，并使用CSS设置 "overflow-y: auto" 属性，以便在内容太长的情况下自动滚动。然后在这个 div 中添加所有模态框的内容。

以下是一个基于Bootstrap 4的模态框示例，其中有一个固定高度的div，当内容超出它的高度时，它的 overflow 属性将自动滚动：

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" 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="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div style="height:270px;overflow-y:auto">
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, fugit?</p>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, fugit?</p>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, fugit?</p>
          <p>........</p>
        </div>
      </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>

3.2 通过CSS实现模态框滚动

为了的模态框中的内容区域添加滚动条，并且当内容太大时自动出现滚动条，可以通过CSS中的 "overflow:hidden" 属性来防止模态框内容溢出。 CSS中的 "display:flex" 属性可以让模态框顶部的标题和关闭按钮保持水平，而模态框内容区域则尺寸自适应并自动出现滚动条。

以下是一个使用CSS实现模态框滚动的示例：

.modal-body{

    overflow-y:auto;
}
.modal-dialog{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

在上面的代码中，修改了 .modal-body 和 .modal-dialog 的CSS样式。.modal-body 添加了 "overflow-y:auto" 属性；.modal-dialog 添加了 "display:flex"、"flex-direction:column" 和 "justify-content:space-between" 属性以让模态框更好的适应页面。

4. 总结

通过本文，我们学习了如何使用Bootstrap将一个模态框添加到页面，并且在模态框中添加滚动条。Bootstrap模态框是一个非常强大且易于使用的工具，可以用于许多场景，例如展示重要消息，提示用户输入等。 在构建Bootstrap模态框时，我们需要记住设置正确的属性和CSS样式，以便将其正确地显示在页面上。