Bootstrap4 模态框：弹出式窗口的实现与示例 - 完整指南 - 常规

Bootstrap4 模态框（Modal）是一种弹出式窗口，用于显示信息，输入数据或进行交互。它可以在单独的页面中显示或在当前页面中显示。以下是 Bootstrap4 模态框的一些常见效果：

简单的模态框

一个简单的模态框可以通过以下代码实现：

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

<!-- 模态框 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>这是模态框的主体内容</p>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

模态框表单

模态框还可以用于显示表单，并接收用户输入的数据。以下代码展示了如何在模态框中显示一个简单的表单：

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

<!-- 模态框 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password">
          </div>
        </form>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>

模态框动画效果

模态框还可以通过添加动画效果来增强用户体验。以下代码展示了如何在模态框中添加一个淡入淡出的动画效果：

<!-- 模态框按钮 -->
<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 modal-dialog-centered" role="document">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>这是模态框的主体内容</p>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们添加了一个fade类，它将模态框的淡入淡出效果应用到模态框窗口。

总结

Bootstrap4模态框提供了一种方便的方式来显示信息，输入数据或进行交互。在使用模态框时，我们可以根据实际需求选择不同的效果，以提高用户体验。