CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3bootstrap-modal
Dennis Braga
Dennis Braga

Reputation: 1478

Modal not being called on bootstrap 3

I have this following code:

<div class="btn slick-slide slick-active" data-toggle="modal" data-target="#photo-carousel-modal" data-slick-index="0" aria-hidden="false" style="width: 234px;">
    <img class="img-holder img-thumbnail" src="image/path.jpg">
</div>

That was supposed to call for this modal here:

 <div class="modal fade bs-example-modal-lg" id="photo-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            {{-- Modal's content --}}
        </div>
    </div>
</div>

It simply not triggers anything! Am I doing some stupidity and not realizing it?

P.S.: YES! The Bootstrap does work properly. I'm using it in other parts of the code and it works like a charm!

Upvotes: 0

Views: 85

Answers (2)

Dennis Braga
Dennis Braga

Reputation: 1478

I found out later that my code had 3 call for jQuery library. one of them was after the bootstrap call. That's where I messed up!

(As a matter of fact, it was the other guy who works here.)

So, kids: DO NOT PLACE YOUR JQUERY CALL AFTER THE BOOTSTRAP CALL! It will make you go nuts!

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

Make sure your bootstrap.js file is called AFTER your jQuery file like this:

<script src="path/to/jquery-file.js"></script>
<script src="path/to/bootstrap.js"></script>

(Also, remove any other bootstrap js file like bootstrap-modal.js, etc as bootstrap.js has everything in it already)

If the above is already done and it still is not showing, please post the codes from your <head....</head and the footer of your webpage on your question.

P.S. Check your browser console for errors so you can get a better idea on what is going on.

Upvotes: 2

Related Questions