Bootstrap 5模态

介绍

Bootstrap是一个流行的前端框架，专注于响应式Web开发。Bootstrap 5是五个主要版本之一，它包含了许多新的特性和改进，例如更新了工具箱、用户自定义CSS、响应式字体大小和卡片组件。Bootstrap 5也包含了一些重要的改进，其中一个就是模态框（Modal）。本文将会介绍Bootstrap 5的模态框，包括如何创建、如何自定义样式以及如何添加交互动画。

创建一个模态框

要创建一个模态框，我们需要先在页面上添加一个触发打开模态框的按钮。 Bootstrap 5使用了一个名为“data-bs-toggle”的HTML属性，以及“data-bs-target”属性，来指示按钮要打开哪个模态框。

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

下一步，我们需要在页面上添加一个模态框元素。 Bootstrap 5使用了一个包含“modal”类的“div”元素，以及一个包含“modal-dialog”和“modal-content”类的“div”元素。 在这个“div”元素中，我们可以添加我们想要显示的内容。 在这个输入框中，我们将添加一个简单的表单。

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容 -->
      <div class="modal-header">
        <h5 class="modal-title">欢迎</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- 表单内容 -->
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">我们永远不会与任何人共享您的电子邮件。</div>
          </div>
          <button type="submit" class="btn btn-primary">提交</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

自定义样式

我们可以通过添加自定义样式来修改模态框的外观。 为了定制我们的模态框，我们可以给它一个不同的背景颜色、扁平化按钮、更大的标题字体和一个自定义图标。

.modal-header {
  background-color: #007bff;
  color: #fff;
  border-radius: 0.25rem 0.25rem 0 0;
}

.modal-header .btn-close {
  color: #fff;
}

.modal-title {
  font-size: 1.25rem;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-close {
  background-color: transparent;
  border: none;
  padding: 0;
  float: none;
  font-size: 1.5em;
  font-weight: 700;
  line-height: inherit;
  opacity: 1;
  color: #fff;
  text-shadow: none;
  z-index: 1;
}

添加交互动画

我们可以使用Bootstrap 5中的内置过渡效果来为模态框添加交互动画。 为了实现这个，我们需要在模态框元素上添加一些额外的类。在这个例子中，我们使用了“fade”和“show”类。这些类将会使模态框以一种优雅的方式打开和关闭。

<div class="modal fade show" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

我们还需要用JavaScript代码给所有的按钮和触发器添加动态效果。

<script>
  // 获取所有 "data-bs-dismiss" 属性的元素
  const dismissModalList = [].slice.call(document.querySelectorAll('[data-bs-dismiss="modal"]'));

  // 为每个元素添加点击事件
  dismissModalList.forEach(function (dismissModalEl) {
    dismissModalEl.addEventListener('click', function () {
      // 获取模态框元素的ID
      const modalId = this.dataset.bsDismiss;
      // 根据模态框ID获取模态框元素
      const modalEl = document.getElementById(modalId);

      // 为模态框元素添加 "hide" 类
      modalEl.classList.add('hide');
      // 等待模态框过渡完成
      modalEl.addEventListener('hidden.bs.modal', function () {
        // 将模态框元素删除
        modalEl.parentNode.removeChild(modalEl);
      });
    });
  });
</script>

总结

使用Bootstrap 5，我们可以轻松地创建和定制模态框。添加交互动画和自定义样式使用起来也很容易。 Bootstrap 5的模态框具有非常好的响应式特性，适用于各种设备和屏幕大小。