Bootstrap对话框添加、删除和编辑

前端

2023-06-01 04:24:08

使用 Bootstrap 创建强大的对话框

Bootstrap 对话框是一种功能强大的工具，可让您在 Web 应用程序中创建直观且用户友好的界面。本文将逐步指导您使用 Bootstrap 创建添加、删除和编辑对话框，从而提升您的 Web 应用程序的用户体验。

1. 添加对话框

添加对话框需要几个步骤：

在页面中添加一个带有 href 属性（指向对话框 ID）的 a 标签。
添加一个具有相应 ID 的 div 标签。
在 div 中包含表单，其中包含字段和提交按钮。

2. 删除对话框

类似于添加对话框，删除对话框也需要遵循以下步骤：

添加一个带有 href 属性（指向对话框 ID）的 a 标签。
添加一个具有相应 ID 的 div 标签。
在 div 中包含一个带有 ID 字段和提交按钮的表单。

3. 编辑对话框

编辑对话框的创建与添加和删除对话框类似，但表单中会包含额外的字段，用于更新用户的详细信息：

添加一个带有 href 属性（指向对话框 ID）的 a 标签。
添加一个具有相应 ID 的 div 标签。
在 div 中包含一个带有 ID、姓名和电子邮件字段以及提交按钮的表单。

4. 处理表单提交

为了处理对话框中的表单提交，需要使用 JavaScript：

使用 jQuery 在表单提交时阻止默认行为。
从表单字段中提取数据。
执行适当的数据库操作（添加、删除或编辑用户）。
关闭对话框。

示例代码：

<!-- 添加对话框 -->
<a href="#addDialog" class="btn btn-primary">添加</a>

<div id="addDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-body">
          <label for="name">姓名</label>
          <input type="text" class="form-control" id="name">
          <label for="email">邮箱</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">添加</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 删除对话框 -->
<a href="#deleteDialog" class="btn btn-danger">删除</a>

<div id="deleteDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-body">
          <label for="id">ID</label>
          <input type="text" class="form-control" id="id">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-danger">删除</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 编辑对话框 -->
<a href="#editDialog" class="btn btn-warning">编辑</a>

<div id="editDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-body">
          <label for="id">ID</label>
          <input type="text" class="form-control" id="id">
          <label for="name">姓名</label>
          <input type="text" class="form-control" id="name">
          <label for="email">邮箱</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-warning">编辑</button>
        </div>
      </form>
    </div>
  </div>
</div>

$(document).ready(function() {
  $("#addDialog form").submit(function(e) {
    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    // 数据库操作：添加用户

    $("#addDialog").modal('hide');
  });

  $("#deleteDialog form").submit(function(e) {
    e.preventDefault();

    var id = $("#id").val();

    // 数据库操作：删除用户

    $("#deleteDialog").modal('hide');
  });

  $("#editDialog form").submit(function(e) {
    e.preventDefault();

    var id = $("#id").val();
    var name = $("#name").val();
    var email = $("#email").val();

    // 数据库操作：编辑用户

    $("#editDialog").modal('hide');
  });
});