Question

2

Bootstrap modal UncaughtType Error on modal loading

rated 0 times [ 9] [ 7] / answers: 1 / hits: 5579 / 2 Years ago, sun, april 24, 2022, 12:00:00

I am using BS modal in my project. I am using a button to open the model but as I open the modal I get this error in my console.

Error:

modal.js:418 Uncaught TypeError: Cannot read properties of null (reading 'hide')

    at HTMLButtonElement.<anonymous> (modal.js:418:23)

    at HTMLDocument.s (event-handler.js:119:21)

HTML:

<div class="card my-2 mx-2 mt-4" style="width: 18rem;">

<button class="btn btn-primary" data-bs-target="#mymodal" data-bs-toggle="modal"  

style="position: absolute; bottom: 0; right: 0">Get Quote</button>

</div>

Modal:

<div class="modal" id="mymodal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

DO SOMETHING

</div>

</div>

</div>

</div>

I am using Bootstrap5 CDNs:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>



<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

1 import const from function in another file javascript

Wed, May 20, 20, 00:00, 4 Years ago

View All

answered 2 Years ago eliasf · Accepted Answer

It could be a bug in Bootstrap5 but I solved by adding the fade class to the modal.

Here's how I did it.

<div class="modal fade" id="mymodal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                DO SOMETHING

            </div>

        </div>

    </div>

</div>