bootstrap 弹出框modal添加垂直方向滚轴效果

要在 Bootstrap 弹出框 modal 中添加垂直方向的滚动条效果，需要进行以下步骤：

步骤一：设置样式

首先，为 Bootstrap 弹出框 modal 添加样式，为其设置一个固定的高度和控制垂直滚动条的 overflow-y 属性。

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

其中，max-height 属性设置了弹出框 modal 中内容最大的高度，超出部分将会有滚动条出现。overflow-y 属性则控制了垂直方向的滚动条，当内容高度超过了 max-height 属性所设置的高度时，触发滚动条的显示。

步骤二：添加内容

在样式设置好之后，需要在弹出框 modal 中添加具体的内容。通常情况下，内容可以放在 modal-body 元素内。

<div class="modal-body">
  <!-- 这里添加具体的内容 -->
</div>

示例一：固定表头的表格

在弹出框 modal 中显示一个固定表头的表格示例：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">表格示例</h4>
      </div>
      <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>张三</td>
              <td>28</td>
              <td>男</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>32</td>
              <td>女</td>
            </tr>
            <tr>
              <td>王五</td>
              <td>25</td>
              <td>男</td>
            </tr>
            <tr>
              <td>刘六</td>
              <td>30</td>
              <td>女</td>
            </tr>
            <!-- 省略一些行 -->
            <tr>
              <td>赵七</td>
              <td>27</td>
              <td>男</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

在上述代码中，table 元素中的 thead 部分被设置为固定，因此当表格内容超出弹出框 modal 中的最大高度时，表格头部仍然可见，而表格主体部分将会有垂直滚动条出现。

示例二：长文本

在弹出框 modal 中显示一段长文本示例：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">文本示例</h4>
      </div>
      <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
        <p>以下是一段长文本，超过弹出框 modal 的最大高度时将会出现垂直滚动条:</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia nam ut vestibulum suscipit. Aliquam nec.</p>
        <!-- 省略一些段落 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia nam ut vestibulum suscipit. Aliquam nec.</p>
      </div>
    </div>
  </div>
</div>

在上述代码示例中，modal-body 元素中包含了一些段落文本，当文本长度超过弹出框 modal 的最大高度时，会出现垂直滚动条。