Bootstrap Modal doesn't show

user_1198201 0
Viewed 68242

I wanted to test out Bootstrap's modal element and created a little test page. But nothing shows up and I'm wondering why, any clues? I got the source from the bootstrap page... My test page is at http://ronhome.no-ip.org/bootstrap/modal.html

twitter-bootstrap modal-dialog
8 Answers

I don't know if this helpfull or not. I've tried for several hours a lot of these tips. At last I added bg-dark to the modals class and it works.

so I changed

<div id="myModal" class="modal fade" role="dialog">

into:

<div id="myModal" class="modal fade bg-dark" role="dialog">
user_25942610

I think you add this CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
user_169209540

So, this worked for me:

Remember to check all dependencies in your project, bootstrap and jquery (in the correct version).

<button type="button" class=" btn rounded-3 add-new-client-btn" id="" data-bs-toggle="modal" data-bs-target="#exampleModal"> Your Button Here</button>

Leave the id in the button empty, and add the modal to the end of the code:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Note: this might change depending the version of bootstrap you're using, always check at https://getbootstrap.com/docs/5.1/components/modal/#modal-components

user_189575370
Related