Cannot read property 'classList' of undefined in Modal popup Bootstrap 5.1

user_2432361 0
Viewed 4751

I am facing issue on bootstrap 5.1 modal popup and getting error Cannot read property 'classList' of undefined . I tried both code on displaying modal popup and still same issue exists. I want to call this modal popup through javascript method only as i have a requirement to display modal popup based on scenarios.

function show() {
    var myModal = new bootstrap.Modal(document.getElementById('myModal'),{})
    myModal.show();
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
          
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" onclick="show()">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

bootstrap-modal javascript
3 Answers

Updated, using javascript triggered:

More can be found on the documentation: https://getbootstrap.com/docs/5.0/components/modal/#live-demo

Why are you using two bootstrap JS files? Included the latest version available as well:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


const myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
const trigg = document.querySelector('#modal-trigger');

function showModal(el){
  el.show();
}

// Event 1:  show after 1 second:
setTimeout(function() {
  showModal(myModal);
  trigg.style.display = 'inline-block';
}, 1000)

// Event 2: show on click:
trigg.addEventListener('click', function(){
  showModal(myModal);
});
#modal-trigger {
  display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" id="modal-trigger">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

If you really must mix vanilla JS with jQuery (for whatever reason), you can do the following:

const trigg = $('#modal-trigger');

trigg.on('click', function(){
  showModal(myModal);
});
user_26663780

The above answers are correct. The reason your Popup is not showing is because is not defined.

This happened to me today, I was doing conditionally rendering of a modal in React. What was going on exactly is that while I was returning the modal markup I was also calling a function to show it.

The mistake was that I was trying to show the modal while it wasn't returned yet, hence why document.getElementById('myModal') was undefined. In order to solve this, I always rendered the modal and I showed it only if a certain condition was true.

I'm sorry I'm so late, and I hope that I can help somebody with this issue.

user_177182420

You were close ,

new bootstrap.Modal expect another param.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
user_113941030
Related