Bootstrap Modal doesn't show

问题:

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

回答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>

回答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 -->

回答3:

You need to include jQuery before Bootstrap.

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

回答4:

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

回答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');

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