php - 同一页面上的 2 个不同模态会引发错误

Question

是否可以在同一页面上使用 2 个 Bootstrap 5 Modals？根据我的研究，它应该能够处理它，但不幸的是它对我不起作用，我的控制台给我错误:未捕获的类型错误:非法调用

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>