While using bootstrap modal I am facing this error ( TypeError Cannot read properties of undefined (reading 'backdrop') ) , which is tracked by our bug tracker, but I am unable to recreate this error. I tried recreating error with various browsers, browser versions, OS. This issue is not showing up on all browsers.
Bootstrap version used - v5.2.1
I initialized modal using JavaScript
if (bootstrap == undefined) {
document.getElementById("browser-not-supported-container").classList.remove("d-none");
} else {
modal1 = new bootstrap.Modal(document.getElementById('modal1'));
modal2 = new bootstrap.Modal(document.getElementById('modal2'));
modal3 = new bootstrap.Modal(document.getElementById('modal3'));
}
Html code for these modals
<!-- Modal 1-->
<div class="modal fade text-start" data-bs-backdrop="static" data-bs-keyboard="false" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Header -->
</div>
<div class="modal-body">
<!-- Body -->
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="modal fade text-start" id="modal2" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<!-- Body -->
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="modal fade text-start" id="modal3" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<!-- Body -->
</div>
</div>
</div>
</div>
The exact error is:
TypeError Cannot read properties of undefined (reading 'backdrop')
/:lineNo3:colNo3 Ni._initializeBackDrop
/:lineNo2:colNo2 new Ni
/:lineNo1:colNo1 HTMLDocument.<anonymous>
Note: lineNo1 is where modal2 is initializing
I also tried with modal options but error is still persisting
modal1 = new bootstrap.Modal(document.getElementById('modal1'), { backdrop: "static", keyboard: false });
modal2 = new bootstrap.Modal(document.getElementById('modal2'), { backdrop: "static", keyboard: false });
modal3 = new bootstrap.Modal(document.getElementById('modal3'), { backdrop: "static", keyboard: false });
While using bootstrap modal I am facing this error ( TypeError Cannot read properties of undefined (reading 'backdrop') ) , which is tracked by our bug tracker, but I am unable to recreate this error. I tried recreating error with various browsers, browser versions, OS. This issue is not showing up on all browsers.
Bootstrap version used - v5.2.1
I initialized modal using JavaScript
if (bootstrap == undefined) {
document.getElementById("browser-not-supported-container").classList.remove("d-none");
} else {
modal1 = new bootstrap.Modal(document.getElementById('modal1'));
modal2 = new bootstrap.Modal(document.getElementById('modal2'));
modal3 = new bootstrap.Modal(document.getElementById('modal3'));
}
Html code for these modals
<!-- Modal 1-->
<div class="modal fade text-start" data-bs-backdrop="static" data-bs-keyboard="false" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Header -->
</div>
<div class="modal-body">
<!-- Body -->
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="modal fade text-start" id="modal2" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<!-- Body -->
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="modal fade text-start" id="modal3" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<!-- Body -->
</div>
</div>
</div>
</div>
The exact error is:
TypeError Cannot read properties of undefined (reading 'backdrop')
https://example./:lineNo3:colNo3 Ni._initializeBackDrop
https://example./:lineNo2:colNo2 new Ni
https://example./:lineNo1:colNo1 HTMLDocument.<anonymous>
Note: lineNo1 is where modal2 is initializing
I also tried with modal options but error is still persisting
modal1 = new bootstrap.Modal(document.getElementById('modal1'), { backdrop: "static", keyboard: false });
modal2 = new bootstrap.Modal(document.getElementById('modal2'), { backdrop: "static", keyboard: false });
modal3 = new bootstrap.Modal(document.getElementById('modal3'), { backdrop: "static", keyboard: false });
-
I get the same error while trying to do this in react.
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') at Modal._initializeBackDrop (modal.js:158:39) at new Modal (modal.js:69:27) at Modal.getOrCreateInstance (base-ponent.js:65:41) at HTMLAnchorElement.<anonymous> (modal.js:364:22) at HTMLDocument.handler (event-handler.js:118:19)– Alan Dsilva Commented Dec 24, 2022 at 8:19 -
I have had the same issue, i just added to this
type="button"to the button invoking the modal and it solved the issue. – abhishek bagul Commented Feb 14, 2023 at 6:43 - I am getting the same error as Alin Dsilva and tried Abishek's solution - it did not work. – Stephen Smith Commented Mar 30, 2023 at 3:15
2 Answers
Reset to default 3I'm using Vue 3 and Bootstrap 5.2.3. I'm trying to show a Modal that I had created and received the exact same error as you did. Here's what the problem was.
Vue has various lifecycle events that can be plugged into to perform actions. Initially I was doing this work in the setup stage:
<script>
import { Modal } from 'bootstrap'
export default {
name: 'MyModal',
setup() { <-- Too early
const myModal = new Modal(document.getElementById('my-modal'), {})
myModal.show()
}
}
</script>
The problem is that the Modal has not been loaded into the DOM at this stage and therefore is undefined when the getElementById action is performed. The solution was to wait until the DOM is loaded by using the mounted stage like so:
<script>
import { Modal } from 'bootstrap'
export default {
name: 'MyModal',
mounted() { <-- Just right
const myModal = new Modal(document.getElementById('my-modal'), {})
myModal.show()
}
}
</script>
If you're not using Vue the answer should be similar. Perform the getElementById action in an event callback function that fires only after the DOM is loaded for instance DOMContentLoaded
You can create a new div and append the modal in that div and then write a trigger remove on hiding of that modal so that the old modal remove when new one opens. Then, open current modal.
var modal = document.createElement('div');
modal.setAttribute("id", "partialV");
modal.innerHTML = resp;
$(modal).find("#viewTenantDetailsModal").on('hidden.bs.modal', function () {
// Remove the modal element from the DOM
$(this).remove();
});
$(modal).find("#viewTenantDetailsModal").modal('show');