I am using the Material theme. Everything else seems to work ok except for modal popups.
I have this markup copied from the demo. There is no problem when running your demo directly, but I have created a _layout.cshtml for my razor site.
Clicking the button shows this error in the console and the modal does not popup. There does not appear to be a vendor.js file I can use to look through the code to determine what is happening.
vendor.min.js:9 Uncaught TypeError: Cannot read properties of null (reading 'hide') at HTMLButtonElement.<anonymous> (vendor.min.js:9:54559) at HTMLDocument.n (vendor.min.js:9:4155)
<p class="sub-header"> A rendered modal with header, body, and set of actions in the footer. </p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#standard-modal">Standard Modal</button>
This is a different error I get when trying to open the modal when I remove the "fade" class
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') at Di._initializeBackDrop (vendor.min.js:9:51594) at new Di (vendor.min.js:9:50471) at Di.getOrCreateInstance (vendor.min.js:9:8166) at HTMLButtonElement.<anonymous> (vendor.min.js:9:54570) at HTMLDocument.n (vendor.min.js:9:4155)
Hi CoderThemes, Thanks for the suggestion. It turns out there was an unrelated button on the page configured incorrectly.
Both the button and the <i> icon had a toggle target and one of them had a typo in it. Somehow just by having this misconfigured button on the page was causing all other buttons/modals to break.
Using Modal popup results in Cannot read properties of null (reading 'hide')
I have this markup copied from the demo. There is no problem when running your demo directly, but I have created a _layout.cshtml for my razor site.
Clicking the button shows this error in the console and the modal does not popup. There does not appear to be a vendor.js file I can use to look through the code to determine what is happening.
vendor.min.js:9 Uncaught TypeError: Cannot read properties of null (reading 'hide')
at HTMLButtonElement.<anonymous> (vendor.min.js:9:54559)
at HTMLDocument.n (vendor.min.js:9:4155)
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title">Bootstrap Modals</h4>
<p class="sub-header">
A rendered modal with header, body, and set of actions in the footer.
</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#standard-modal">Standard Modal</button>
<!-- Standard modal content -->
<div id="standard-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="standard-modalLabel">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6>Text in a modal</h6>
</div>
....
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
at Di._initializeBackDrop (vendor.min.js:9:51594)
at new Di (vendor.min.js:9:50471)
at Di.getOrCreateInstance (vendor.min.js:9:8166)
at HTMLButtonElement.<anonymous> (vendor.min.js:9:54570)
at HTMLDocument.n (vendor.min.js:9:4155)
It could trigger modal ID or modal ID not present.
Let me know, after confirming.
Best,
Coderthemes
Thanks for the suggestion. It turns out there was an unrelated button on the page configured incorrectly.
Both the button and the <i> icon had a toggle target and one of them had a typo in it. Somehow just by having this misconfigured button on the page was causing all other buttons/modals to break.
<button type="button" class="btn btn-primary waves-effect waves-light float-end" data-bs-toggle="modal" data-bs-target="#custom-modal">
<i class="mdi mdi-plus-circle me-2" data-bs-toggle="modal" data-bs-target="#customTypo-modal"></i>Open Modal
</button>
Please share the page URL.
Thank you.