html5 - Twitter bootstrap modal window doesn't appear -
i have application twitter bootstrap library included. jquery library loaded first library, others libraries loaded next. reason modal window doesn't work. no errors in console. have same application , same code works great.
here 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"> <!-- 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">×</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"> <!-- code --> </div> </div> </div> </div> </div> </div> ...
first off, givens: 1. load jquery first 2. load boostrap js after
then, modal needs triggered off of event, such on page load or button click.
for instance, maybe 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 call through jquery: http://getbootstrap.com/javascript/#modals-methods
Comments
Post a Comment