Bootstrap Modal基础功能正常，但Overlay组件交互异常：提交表单后Spinner与成功消息未显示

Hey there! Let's work through this modal issue you're dealing with. From what you shared, the core problem is that after submitting your form, the spinner and success message aren't showing up at all—only the modal closes via the setTimeout() inside your showSuccess() function. Plus, you mentioned your custom modalOverlay is placed right after the modal-footer inside modal-content—that's probably one of the main culprits.

Let's break down the fixes step by step:

1. Fix the DOM structure of your overlay #

Bootstrap's default modal backdrop lives outside the modal-content container, and if you're using a custom overlay for loading states, placing it inside modal-content can cause z-index conflicts or layout issues that hide your spinner/message. Here's a corrected structure to try:

<div class="modal fade" id="yourModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Form Submission</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body position-relative">
        <!-- Your form goes here -->
        <form id="submitForm">
          <!-- Form fields -->
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <!-- Custom loading overlay (positioned to cover modal body) -->
        <div id="modalOverlay" class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-80 d-flex flex-column justify-content-center align-items-center d-none">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-2">Processing your request...</p>
        </div>

        <!-- Success message -->
        <div id="successMsg" class="alert alert-success mt-3 d-none">
          Form submitted successfully!
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Notice the modal-body has position-relative—this lets the absolute-positioned overlay stay contained within it. Also, I fixed the typo in your original code (align-i → align-items-center).

2. Adjust your showSuccess() logic to toggle visibility correctly #

Right now, your code is only triggering the modal close, but not handling the spinner and success message visibility. Here's a revised JavaScript example that walks through the full flow:

function handleFormSubmit(e) {
  e.preventDefault();
  const overlay = document.getElementById('modalOverlay');
  const successMsg = document.getElementById('successMsg');
  const modal = bootstrap.Modal.getInstance(document.getElementById('yourModal'));

  // Step 1: Show loading overlay, hide success message
  overlay.classList.remove('d-none');
  successMsg.classList.add('d-none');

  // Simulate form submission delay (replace with your actual API call)
  setTimeout(() => {
    // Step 2: Hide overlay, show success message
    overlay.classList.add('d-none');
    successMsg.classList.remove('d-none');

    // Step 3: Close modal after a short delay so user sees the success message
    setTimeout(() => {
      modal.hide();
      // Reset form for next use
      e.target.reset();
    }, 2000);
  }, 1500);
}

// Bind the submit event to your form
document.getElementById('submitForm').addEventListener('submit', handleFormSubmit);

The key here is explicitly toggling the d-none class (Bootstrap's utility for hiding elements) at each step of the process—you need to show the overlay first, then swap it for the success message, then close the modal.

3. Double-check z-index and styling #

Make sure your modalOverlay has a z-index higher than other elements in the modal body. Since we're using Bootstrap's positioning classes, the overlay should already sit on top, but if you run into issues, add this CSS:

#modalOverlay {
  z-index: 10; /* Higher than modal body content, lower than modal header/footer if needed */
}

The main issues were likely the misplaced overlay and missing visibility toggles in your JavaScript. Once you adjust those, your spinner and success message should show up as expected before the modal closes.

备注：内容来源于stack exchange，提问作者CChickii