Bootstrap modal not displaying

Question

I\'ve copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3.2 app:

        
                      

              相关标签:
       
      

Answer 1

Just to elaborate on @jfdimark answer. It was most likely to cause due to same css class name somewhere in loaded CSS. Therefore, instead of defining modal class as "modal fade", change it to "modal fade in" then try again.

Answer 2

Change you Code To something like this,

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

and try using data-target="#ModelId" once. maybe it's the possible causing the issue.

Second, if you have included JQuery more then one time, remove it and include it once only. It also prevents the model sometimes.

Answer 3

I just came across this issue, and found custom CSS style sheet text color:#ffffff is submerging the text content, because model background color is same! i.e. .model-content{ background-color:#ffffff;} Make sure to override it in your custom style sheet by adding the following .modal-content{color:#646464 !important;}
May be this helps.

Answer 4

Delete the data-target attribute from button type. Then add onClick="$('#your_modal_name').modal('show')" in the button tag. I hope it will work as I faced the same problem & I fixed the issue by calling the show class of modal via jQuery.

Answer 5

If you've upgraded from Bootstrap 2.3.2 to Bootstrap 3 then you'll need to remove the 'hide' class from any of your modal divs.;

Answer 6

If you're running Bootstrap 4, it may be due to ".fade:not(.show) { opacity: 0 }" in the Bootstrap css and your modal doesn't have class 'show'. And the reason it doesn't have class 'show' may be due to your page not loading jQuery, Popper, and Bootstrap Javascript files.

(The Bootstrap Javascript will add the class 'show' to your dialog automagically.)

Reference: https://getbootstrap.com/docs/4.3/getting-started/introduction/