CODEWITHSUNDEEP
phpbootstrap-modalbootstrap-5
user14837802
user14837802

Reputation:

2 different Modals on the same page throws error

Is it possible to use 2 Bootstrap 5 Modals on the same page? From my research, it should be able to handle it, but unfortunately it does not work for me and my console is giving me error: Uncaught TypeError: Illegal invocation

The Modal n.1 (for login) works just fine, but Modal n.2 (register) is giving me the error mentioned above. I do have different ID for both of them as you can check in the code below.

Modal action links in my dropdown:

<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>

Modals:

<!-- 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>

Upvotes: 2

Views: 16626

Answers (1)

user8034901
user8034901

Reputation:

You are using different attributes on your dropdown items:

<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>

In your second line you are using data-target instead of data-bs-target, change your code to:

<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>

Upvotes: 3

Related Questions