同一页面上的 2 个不同模式会引发错误

Question

是否可以在同一页面上使用 2 Bootstrap 5 个模态框？根据我的研究，它应该能够处理它，但不幸的是它对我不起作用，我的控制台给我错误：Uncaught TypeError: Illegal invocation

Modal n.1（用于登录）工作正常，但 Modal n.2（注册）给我上面提到的错误。我确实为他们提供了不同的 ID，您可以在下面的代码中查看。

我的下拉列表中的模态操作链接：

<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-target="#registerModal">Register</a></li>

模态：

<!-- Login Modal -->
    
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModal-label" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title text-center" id="loginLabel">Login</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <?php require './Login.php'; ?>
      </div>
    </div>
  </div>
</div>
    
<!-- Register Modal -->
    
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModal-label" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title text-center" id="registerLabel">Register</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <?php require './Register.php'; ?>
     </div>
   </div>
  </div>
</div>

Answer 1

您在下拉项上使用了不同的属性：

<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-target="#registerModal">Register</a></li>

在您的第二行中，您使用的是 data-target 而不是 data-bs-target，请将您的代码更改为：

<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#registerModal">Register</a></li>

同一页面上的 2 个不同模式会引发错误

2 different Modals on the same page throws error

php

bootstrap-modal

bootstrap-5