Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
plugins.bundle.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
I use the following code
<a href="/%22%20data-bs-toggle=%22modal%22%20class=%22btn%20btn-xs%20btn-default%20btn-action-view%22%20data-bs-target=%22#kt_confirmation_%7B%7B%24index%7D%7D%22%20target=%22_self" target="_blank" rel="noopener noreferrer">
<i class="bi bi-trash3 fs-4"></i> Delete
</a>
</td>
<div class="modal fade" tabindex="-1" id="#kt_confirmation_{{$index}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete {{$d->name}}
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-1"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Please confirm?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>Got this error
Uncaught TypeError: Cannot read properties of undefined (reading "backdrop")
at it._initializeBackDrop (plugins.bundle.js:25:141837)
at new it (plugins.bundle.js:25:140714)
at it.getOrCreateInstance (plugins.bundle.js:25:118461)
at HTMLAnchorElement.<anonymous> (plugins.bundle.js:25:144817)
at HTMLDocument.i (plugins.bundle.js:25:114399)Please advise
Thank you
Replies (5)
Hi,
Could you please try to check if the modal structure is correct? Please try to use the example modal from the bootstrap docs site.
https://getbootstrap.com/docs/4.4/components/modal/#live-demo
Thanks
Thank you
Hi,
Could you please try to add the fade class to the modal?
https://stackoverflow.com/questions/71986396/bootstrap-modal-uncaughttype-error-on-modal-loading
Thanks
correction to the code...
<a href="/%22%20data-bs-toggle=%22modal%22%20class=%22btn%20btn-xs%20btn-default%20btn-action-view%22%20data-bs-target=%22#kt_confirmation_%7B%7B%24index%7D%7D%22%20target=%22_self" target="_blank" rel="noopener noreferrer">
<i class="bi bi-trash3 fs-4"></i> Delete
</a>
</td>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete {{$d->name}}
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-1"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Please confirm?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div><a href="/%22%20data-bs-toggle=%22modal%22%20class=%22btn%20btn-xs%20btn-default%20btn-action-view%22%20data-bs-target=%22#kt_confirmation_%7B%7B%24index%7D%7D%22%20target=%22_self" target="_blank" rel="noopener noreferrer">
<i class="bi bi-trash3 fs-4"></i> Delete
</a>
</td>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete {{$d->name}}
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-1"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Please confirm?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>
