写一个完整的添加模态框包括 function

好的，以下是一个基于jQuery和Bootstrap框架的模态框添加的完整代码实现：

<!-- 模态框添加按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  添加
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加记录</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 表单 -->
        <form id="add-form">
          <div class="form-group">
            <label for="inputName">姓名</label>
            <input type="text" class="form-control" id="inputName" name="name" placeholder="请输入姓名">
          </div>
          <div class="form-group">
            <label for="inputEmail">邮箱</label>
            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label for="inputPhone">电话</label>
            <input type="tel" class="form-control" id="inputPhone" name="phone" placeholder="请输入电话">
          </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" id="add-btn">保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  // 添加按钮点击事件
  $('#add-btn').click(function () {
    // 获取表单数据
    var formData = $('#add-form').serialize();
    // 发送POST请求，添加记录
    $.ajax({
      type: 'POST',
      url: '/api/add',
      data: formData,
      success: function (data) {
        // 添加成功，关闭模态框并刷新页面
        $('#exampleModal').modal('hide');
        location.reload();
      },
      error: function (xhr, status, error) {
        // 添加失败，输出错误信息
        console.error(xhr.responseText);
      }
    });
  });
</script>

解释一下上面的代码：

首先，我们需要一个触发模态框的按钮，这里我们使用了Bootstrap提供的按钮样式，设置了data-toggle和data-target属性，分别表示点击按钮时打开模态框的方式和目标模态框的ID。

接着，我们定义了一个ID为exampleModal的模态框，其中包含了一个模态框对话框（modal-dialog）和一个模态框内容（modal-content），以及模态框头部（modal-header）、模态框主体（modal-body）和模态框底部（modal-footer）三个部分。

在模态框头部部分，我们定义了一个标题，以及一个关闭按钮，点击关闭按钮可以关闭模态框。

接下来，在模态框主体部分，我们使用了一个表单元素，包含了三个表单项：姓名、邮箱和电话。这里只是一个示例表单，实际应用中可以根据需求添加更多表单项。表单元素还添加了name属性，用于后面的jQuery选择器。

最后，在模态框底部部分，我们定义了一个关闭按钮和一个保存按钮，点击关闭按钮可以关闭模态框，点击保存按钮可以保存表单数据。保存按钮添加了一个点击事件，用于发送POST请求，将表单数据添加到后台数据库中。请求成功后，关闭模态框并刷新页面；请求失败时，输出错误信息。