CODEWITHSUNDEEP
htmltwitter-bootstrap-3
P.Shustenko
P.Shustenko

Reputation: 93

Twitter bootstrap modal window doesn't appear

I have an application with twitter bootstrap library included. The JQuery library is loaded as a the first library, all the others libraries are loaded next. But for some reason my modal window doesn't work. The are no errors in the console. I have almost the same application and the same code works great.

Here is the code:

<body ng-app="calcA" ng-controller="calcACtrl">
  <div class="calc-container" ng-cloak>
    <form class="calc-fields" name="choice" novalidate ng-hide="types.individual || types.kids || types.family || types.car">
        <!-- my code -->
        </div>
    </form>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document"  style="width: 75%; height :95%; font-size: small">
            <div class="modal-content">
                <div class="modal-header" style="margin: 0; padding: 5px 10px 2px 2px !important">
                    <button type="button" class="close" data-dismiss="modal" ng-click="closeIndividual()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <p class="modal-title" id="myModalLabel" style="text-align: center"><b>Modal Title</b></p>
                </div>
                    <div class="modal-body" style="padding: 5px">
                      <div ng-hide="!types.individual">
                        <!-- my code -->
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ...

Upvotes: 0

Views: 34

Answers (1)

EdwardM
EdwardM

Reputation: 1146

First off, the givens: 1. Load jQuery first 2. Load Boostrap js after

Then, the modal needs to get triggered off of an event, such as on page load or a button click.

For your instance, maybe a button like:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Docs: http://getbootstrap.com/javascript/#live-demo

Alternative methods to call it through jQuery: http://getbootstrap.com/javascript/#modals-methods

Upvotes: 1

Related Questions