Bootstrap5 模态

Bootstrap 的模态框（Modal）是一种覆盖在页面上的对话框，用户需要关闭模态框后才能继续操作页面的其他部分。模态框常用于显示重要的信息或让用户进行某些操作，如登录、注册或确认操作等。

模态的基本结构

模态的基本结构包括一个触发模态框打开的按钮，以及模态框本身的 HTML 结构。下面是一个简单的模态框示例：

// www.javascriptcn.com code example
<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这里是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

在这个例子中，data-bs-toggle="modal" 和 data-bs-target="#exampleModal" 属性被添加到按钮上，用于触发模态框。模态框本身由 .modal 类定义，同时还需要 .fade 类来实现动画效果。.modal-dialog 定义了模态框的大小和位置，而 .modal-content 包含了模态框的所有内容。

模态的样式调整

可以通过自定义 CSS 来改变模态框的外观。例如，如果你想改变模态框的背景颜色，可以在 CSS 中这样写：

.modal-content {
  background-color: #f8f9fa;
}

如果你想要更精细地控制模态框的样式，可以使用 .modal-lg 或 .modal-sm 类来调整模态框的宽度：

// www.javascriptcn.com code example
<!-- 较大的模态框 -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

<!-- 较小的模态框 -->
<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

此外，还可以通过 JavaScript 动态改变模态框的内容或行为。

使用模态事件

Bootstrap 提供了一些事件，允许你在模态框显示或隐藏时执行特定的操作。这些事件包括：

• show.bs.modal：在模态框开始显示时触发。
• shown.bs.modal：在模态框完全显示后触发。
• hide.bs.modal：在模态框开始隐藏时触发。
• hidden.bs.modal：在模态框完全隐藏后触发。

你可以通过监听这些事件来执行相应的逻辑。例如：

$('#exampleModal').on('shown.bs.modal', function () {
  // 模态框显示后的操作
  console.log('模态框已显示');
});

动态内容加载

有时候，模态框的内容需要从服务器动态加载。你可以通过 AJAX 请求来获取数据，并将数据插入到模态框中。以下是一个使用 jQuery 实现的例子：

// www.javascriptcn.com code example
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 获取触发模态框的按钮
  var recipient = button.data('whatever'); // 读取按钮上的 data-whatever 属性

  var modal = $(this);
  $.ajax({
    url: 'your-server-endpoint',
    method: 'GET',
    data: {id: recipient},
    success: function(response) {
      modal.find('.modal-body').html(response);
    }
  });
});

在这个例子中，当模态框即将显示时，会触发一个 AJAX 请求来获取数据，并将返回的数据插入到模态框的主体部分。

模态框的嵌套

有时你可能需要在一个模态框中嵌套另一个模态框。虽然不推荐这样做，但 Bootstrap 并没有限制这样做。需要注意的是，嵌套的模态框可能会导致用户体验不佳，因此在实际项目中应谨慎使用。

// www.javascriptcn.com code example
<!-- 外层模态框 -->
<div class="modal fade" id="outerModal" tabindex="-1" aria-labelledby="outerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="outerModalLabel">外层模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是外层模态框的内容。
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#innerModal">
          打开内层模态框
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 内层模态框 -->
<div class="modal fade" id="innerModal" tabindex="-1" aria-labelledby="innerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="innerModalLabel">内层模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是内层模态框的内容。
      </div>
    </div>
  </div>
</div>

以上就是 Bootstrap 5 模态的相关内容。希望这些示例和说明能够帮助你更好地理解和使用模态框功能。