Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

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 happy


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.



Thanks



Thank you



Hi,

Could you please try to add the fade class to the modal?



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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(