Could someone explain to me why the modal dialog is not opening when I click the button? I keep receiving the error message: "document.getElementById(...).modal is not a function". Any help would be greatly appreciated :)
Below is my HTML code:
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<button ng-click ="open()">Open</button>
<div class="modal custom-modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog custom-modal-dialog vertical-align-center">
<div class="modal-content custom-modal-content">
<div class="modal-body custom-modal-body">
<div class="custom-modal-inside">
<p>Calculating Rates, Price & Fees ...</p>
<p>
<img src="ajax-loader.gif">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And here is the JavaScript function open():
app = angular.module('ModalDemo', []);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.open = function() {
document.getElementById('myModal').modal({ show: true, backdrop: false, keyboard: false });
};
}]);
Everything seems to work fine if I replace the button tag with this:
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false" >
However, I really need to open the modal from the JavaScript function. Can anyone shed some light on why it's not working?