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>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);
});
You were close ,
new bootstrap.Modal expect another param.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
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.