如何用JavaScript打开Bootstrap模态框？Bootstrap5.3.1代码失效求助

• Use Bootstrap's Vanilla JavaScript API
  Bootstrap 5 dropped jQuery dependency by default, so the jQuery .modal('show') method won’t work with the standard build. Replace it with the vanilla JS approach:

// Initialize the modal instance
const myModal = new bootstrap.Modal(document.getElementById('my_modal'));
// Trigger the modal to show
myModal.show();

• Ensure DOM is Fully Loaded
  Your script might run before the modal element exists in the DOM. Wrap your code in a DOM load listener:

document.addEventListener('DOMContentLoaded', function() {
  const myModal = new bootstrap.Modal(document.getElementById('my_modal'));
  myModal.show();
});

Alternatively, place your script tag after the modal element (right before </body>) to guarantee the element is loaded first.

• Verify Modal HTML Structure
  Double-check your modal has the correct Bootstrap 5 markup. Example of a valid modal:

<div class="modal fade" id="my_modal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content here.
      </div>
    </div>
  </div>
</div>

Confirm the id matches exactly (my_modal) and all required accessibility attributes are present.

• (Deprecated) Use jQuery with Bootstrap's jQuery Bundle
  If you must use jQuery, you need to include the jQuery-specific Bootstrap build (not the standard one). This is discouraged as Bootstrap is moving away from jQuery:

$("#my_modal").modal('show');

内容的提问来源于stack exchange，提问作者user16887248