Bootstrap Modal doesn't show

Question

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

Venturous

Ran into this myself. In my case I had similar pages with the same dialog names. I added a new dialog, but jQuery couldn't pull my dialog because it was a different DOM. Problems arise with dense, duplicative DOMs. – Hosiery

Answer 1

first thing you need to include jquery, and also trigger the modal, either with a button -

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

or show the bootstrap modal using jquery -

<script type="text/javascript">
$(document).ready(function(){
    $('.modal').modal('show');
});
</script>

Neuroticism

Answer 2

Your example doesn't have jQuery included.

Uncaught Error: Bootstrap requires jQuery 

You must include jQuery before including Bootstrap.

Also, Bootstrap Modal's need to either be toggled by some kind of control on the page, or by JavaScript: http://getbootstrap.com/javascript/#modals-usage

This means you either need a button with the appropriate data attributes, which would correspond to attributes set on your modal, or execute via javascript

via JavaScript:

$('.modal').modal('show')

Or via attributes on a control:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

EDIT: If you do this, you need to specify the target as the ID of the modal div

<div id="myModal" class="modal fade">
   <!--modal content here -->
</div><!-- /.modal -->

Pentheam

I did exaclty what you're saying but still nothing shows up: ronhome.no-ip.org/bootstrap/modal.html – Venturous

Firstly, you need to reference JQuery before Bootstrap. You also need to give the modal div the ID you've placed in data-target of your button. See my edit in the answer – Pentheam

Answer 3

You need to include jQuery before Bootstrap.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Underhand

Answer 4

you should load your jQuery javascript files, before bootstrap javascript files!
hope it work

Ravishment

Answer 5

In my case the bootstrap model was not showing up when i did this

$('#myModal').show();

But i modified above piece of code to the one below, then it worked

$('#myModal').modal('show');

Kratzer

Answer 6

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">

Eucharist

Answer 7

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>

Galiot

Answer 8

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

Gian

In this answer I was using Bootstrap v5.1 – Gian

Answer 9

I am using Bootstrap v5.1.0 version. .modal(); command did not work. It worked fine with .modal('show') .screenshot

Srinagar