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

I had the same issue and I realized that my <button>had a type="submit"when Bootstrap states that it needs to be type="button"

Answer 2

I had the same problem.

Solution: I put modal's DIV in the uppermost scope of main HTML (due to using Jinja2 blocks my modal got nested somewhere in the middle of some other DIV.

Answer 3

if you are using custom CSS instead of defining modal class as "modal fade" or "modal fade in" change it to only "modal" in HTML page then try again.

Answer 4

I had my modal < div > inside my < li >.... not good.

Outside works fine :-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>

Answer 5

Maybe a very rare scenario but I can't add a comment so leaving this here in case it helps someone: I had a similar issue dealing with someone else's code, modal wasn't displaying when I added ".fade" class, issue was some CSS for .modal-backdrop:

.modal-backdrop {display: none;}

After removing that modal shows up fine.

Answer 6

1. Check for all js files, the order should be maintained.
2. The order should be maintained as

    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files