如何在表单成功提交后关闭Bootstrap模态框？

嘿，你的表单提交逻辑已经跑通大半啦，就差最后一步关闭模态框的操作～用Bootstrap 5自带的JS API就能轻松搞定，我给你调整下代码：

首先，Bootstrap 5的模态框是通过实例来管理状态的，你只需要在表单提交成功的回调里，获取到模态框的实例，然后调用它的hide()方法就行。

修改你的save()函数，在clearForm()之后加上关闭模态框的代码：

function save() {
    let id = document.getElementById('id').value;
    let user = document.getElementById('user').value;
    let email = document.getElementById('email').value;
    let message= document.getElementById('message').value;

    let formData = new FormData();
    formData.append('id', id);
    formData.append('user', user);
    formData.append('email', email);
    formData.append('message', message);

    let action = id ? 'create' : 'create'; // 这里提一嘴，有id的时候是不是应该用update？不过不影响模态框的逻辑～

    fetch(`functions.php?action=${action}`, {method: 'POST', body: formData})
    .then(response => response.text())
    .then(data => {
        loadData();
        clearForm();
        // 新增这部分代码关闭模态框
        const modal = document.getElementById('messagebook');
        const modalInstance = bootstrap.Modal.getOrCreateInstance(modal);
        modalInstance.hide();
    })
    // 可选：加上错误处理，提交失败时不关闭模态框并提示用户
    .catch(error => {
        console.error('提交出错了:', error);
        alert('消息提交失败，请稍后再试');
    });
 }

为啥要这么写呢？因为直接手动隐藏DOM元素可能会跳过Bootstrap的模态框状态管理，用官方提供的hide()方法既能触发关闭动画，也能正确更新模态框的状态，避免出现奇怪的问题。

另外，你的模态框设置了data-bs-backdrop="static"和data-bs-keyboard="false"，这意味着用户不能通过点击背景或者ESC键关闭，所以用代码调用hide()是最稳妥的方式。

备注：内容来源于stack exchange，提问作者Mars Red Planet