Opening Bootstrap modal dialog from javascript not working

Question

Can anyone tell my why modal dialog is not opening on button click? I get error message: "document.getElementById(...).modal is not a function". Please help :)

Here is my html:

<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 javasript 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 works fine if replace button tag with this:

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false" >

But I need to open modal from javasript function, so why it's not working?

It is best practice not to do DOM manipulation in the controller in Angular JS — shivas
– shivas, Commented Apr 29, 2015 at 12:38
I change that, and after that I get error: document.getElementById(...).modal is not a function... What is the problem? — bambi
– bambi, Commented Apr 29, 2015 at 12:40
@Sourabh, Mistake in copy, but that doesn't change anything. — bambi
– bambi, Commented Apr 29, 2015 at 12:50

shivas · Accepted Answer · 2015-04-29 12:55:15Z

Try this Plunker: http://plnkr.co/edit/PPaGgFJbe8QcAU80lNm5?p=preview

This is keeps your modal usage inline the Angular way.

Hope this works for you!

HTML:

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="[email protected]" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      Click to open: <a class="btn btn-primary" ng-click="Open()">Open Modal</a>
    </div>
  </body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope,$modal) {
  $scope.name = 'World';

  $scope.Open = function(){
    var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: 'confirmmodalController',
                controllerAs: 'confirmmodalCtrl',
                size: 'sm'
            });

            modalInstance.result.then(function () {
                // Ok
            }, function () {
                // Cancel
            });
  }
})
.controller('confirmmodalController', function ($modalInstance) {
    var self = this;

    self.ok = function () {
        $modalInstance.close();
    };

    self.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

Modal HTML:

<div class="modal-header">
    <h3 class="modal-title"><i class="fa fa-exclamation-triangle"></i> Confirm</h3>
</div>
<div class="modal-body">
    Modal Text here.....
</div>
<div class="modal-footer">
    <button class="btn btn-danger" ng-click="confirmmodalCtrl.ok()">OK</button>
    <button class="btn btn-default" ng-click="confirmmodalCtrl.cancel()">Cancel</button>
</div>

Zee · Accepted Answer · 2015-04-29 13:18:46Z

1

Change your button to

<button ng-click ="open()">Open</button>

Also include jQuery before bootstrap as bootstrap depends on jQuery. Then replace

document.getElementById('loanScenarioModal').modal({ show: true, backdrop: false, keyboard: false });

with

jQuery('#myModal').modal({ show: true, backdrop: false, keyboard: false });

Fiddle Here.

edited Apr 29, 2015 at 13:18

answered Apr 29, 2015 at 12:50

Zee

8,4805 gold badges39 silver badges59 bronze badges

1 Comment

Zee Over a year ago

@bambi. Check the fiddle I added. Works fine. I guess something else is not working.

Collectives™ on Stack Overflow

Opening Bootstrap modal dialog from javascript not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related