plugins.bundle.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')

I use the following code

<a href="/"%20data-bs-toggle="modal"%20class="btn%20btn-xs%20btn-default%20btn-action-view"%20data-bs-target="#kt_confirmation_{{$index}}"%20target="_self" target="_blank" rel="nofollow ugc 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

A BL 3 years ago

Laravel Bootstrap 5 HTML

5 Answers

Text formatting options

Private reply Submit

Click any option to insert into your comment. Select text first to wrap it.

**text** to make things bold
*text* to emphasize
### Heading to make headings
[link text](url) for links
![alt text](image-url) to paste in an image
- item to make a list
1. item to make an ordered list
> quote to quote somebody
`code` for single line of code
```js ... ``` for JS code block
```html ... ``` for HTML code block
```scss ... ``` for SCSS code block
```php ... ``` for PHP code block
--- for a horizontal rule
:)
:|
:(

Replies (5)

Faizal Author 3 years ago

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

A BL 3 years ago

Thank you

Faizal Author 3 years ago

Hi,

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

Thanks

A BL 3 years ago

correction to the code...

<a href="/"%20data-bs-toggle="modal"%20class="btn%20btn-xs%20btn-default%20btn-action-view"%20data-bs-target="#kt_confirmation_{{$index}}"%20target="_self" target="_blank" rel="nofollow ugc 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 BL 3 years ago

<a href="/"%20data-bs-toggle="modal"%20class="btn%20btn-xs%20btn-default%20btn-action-view"%20data-bs-target="#kt_confirmation_{{$index}}"%20target="_self" target="_blank" rel="nofollow ugc 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>

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation

plugins.bundle.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')

Replies (5)

Metronic

ReUI

Products

Legal

Stay Connected