2

是否可以在同一页面上使用 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>
4

1 回答 1

2

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

<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>
于 2020-12-16T16:21:55.807 回答