plugins.bundle.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
I use the following code
<a href="/" data-bs-toggle="modal" class="btn btn-xs btn-default btn-action-view" data-bs-target="#kt_confirmation_{{$index}}" target="_self">
<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}}</h3>
<!--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)
<a href="/" data-bs-toggle="modal" class="btn btn-xs btn-default btn-action-view" data-bs-target="#kt_confirmation_{{$index}}" target="_self">
<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}}</h3>
<!--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>correction to the code...
<a href="/" data-bs-toggle="modal" class="btn btn-xs btn-default btn-action-view" data-bs-target="#kt_confirmation_{{$index}}" target="_self">
<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}}</h3>
<!--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>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
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
