将 modal.open 类添加到正文

在Web开发中，Modal是一个常见的控件，通常在用户操作时显示弹出窗口来提示用户或要求用户输入信息。Bootstrap是一组很流行的UI框架之一，提供了丰富的Modal组件样式和交互功能。

要向正文添加modal打开类，可以使用Bootstrap提供的JavaScript插件进行操作。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

上面的代码中，data-toggle="modal"和data-target="#myModal"是关键之处。data-toggle="modal"表示点击按钮时使用modal插件来显示弹出窗口，data-target="#myModal"表示指定要显示的Modal的ID，这边示例指定的ID是myModal。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Title</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Modal Body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

上面的代码定义了一个Modal，其中id属性与data-target对应。Modal的内容可以自定义，由modal-header、modal-body和modal-footer3个部分组成。在Modal的尾部添加data-dismiss="modal"可以关闭Modal。

添加modal.open类是类似的。如果在按钮元素上添加modal.open类，则点击该元素时将打开Modal。

<button type="button" class="btn btn-primary modal-open" data-target="#myModal">
  Open Modal
</button>

在页面的JavaScript代码中，需要初始化Modal组件：

$(document).ready(function(){
  $('.modal').modal();
});

现在，你已经了解了如何将modal.open类添加到正文中并使用Bootstrap的Modal组件来创建弹出窗口。