从javascript打开Bootstrap模态对话框不起作用

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". 我收到错误消息：“ document.getElementById（...）。modal不是函数”。 Please help :) 请帮忙：）

Here is my html: 这是我的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(): 这是javasript函数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? 但是我需要从javasript函数打开模式，为什么它不起作用？

Answer 1

Change your button to 将按钮更改为

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

Also include jQuery before bootstrap as bootstrap depends on jQuery. 在bootstrap bootstrap之前还包括jQuery ，因为bootstrap取决于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 . 在这里摆弄。

Answer 2

Try this Plunker: http://plnkr.co/edit/PPaGgFJbe8QcAU80lNm5?p=preview 试试这个Plunker： http ://plnkr.co/edit/PPaGgFJbe8QcAU80lNm5?p=preview

This is keeps your modal usage inline the Angular way. 这样可以使您的模式用法以Angular方式内联。

Hope this works for you! 希望这对您有用！

HTML: 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="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="ui-bootstrap@0.12.1" 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: 使用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: 模态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>

从javascript打开Bootstrap模态对话框不起作用

问题描述

2 个解决方案

解决方案1
1 2015-04-29 12:50:06

解决方案2
1 2015-04-29 12:55:15

从javascript打开Bootstrap模态对话框不起作用

问题描述

2 个解决方案

解决方案1 1 2015-04-29 12:50:06

解决方案2 1 2015-04-29 12:55:15

解决方案1
1 2015-04-29 12:50:06

解决方案2
1 2015-04-29 12:55:15