成功提交表单后如何关闭引导模式？

Question

我正在学习 HTML、CSS、JS 和 PHP，并自己制作一个页面，让用户留言，但我无法实现一种在用户正确提交表单后使模式关闭的方法。

这是代码的一部分：

[...]
<div class="modal fade" id="messagebook" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Write a message:</h1>
                <button type="button" class="btn-close" onclick="clearForm()" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <form onsubmit="event.preventDefault(); save();">
                <div class="modal-body">
                  <fieldset>
                    <input type="hidden" id="id">
                    <div class="book">
                      <label for="user">User:</label><br>
                      <input type="text" id="user" name="user" required>
                    </div>
                    <div class="book">
                      <label for="email">E-mail:</label><br>
                      <input type="email" id="email" name="email" required>
                    </div>
                  </fieldset>
                  <fieldset>
                    <div class="book">
                      <label for="message">Message:</label><br>
                      <textarea type="text" id="message" name="message" rows="5" cols="30" required></textarea>
                    </div>
                  </fieldset>
                </div>
                <div class="modal-footer">
                  <button type="submit" id="sub" class="but">Send</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>
    <br>
[...]
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="SiteAjs.js"></script>
[...]

Answer 1

看来这一行应该改变：

<button type="submit" id="sub" class="but">Send</button>

对于这个：

<button type="submit" id="sub" class="but" data-bs-target="#messagebook" data-bs-dismiss="modal">Send</button>

或者通过

save()

函数中的 JavaScript 隐藏模式：

// Just for reference (can be outside the save function)...
const myModal = new bootstrap.Modal(document.getElementById('messagebook'), {
  keyboard: false
});

// Should be inside your save function:
myModal.hide();