從javascript打開Bootstrap模態對話框不起作用

Question

誰能說出為什么單擊按鈕后模態對話框沒有打開？ 我收到錯誤消息：“ document.getElementById（...）。modal不是函數”。 請幫忙：）

這是我的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>

這是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 });
  };
}]);

如果將按鈕標簽替換為以下內容，則一切正常：

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

但是我需要從javasript函數打開模式，為什么它不起作用？

Answer 1

將按鈕更改為

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

在bootstrap bootstrap之前還包括jQuery ，因為bootstrap取決於jQuery。 然后更換

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

同

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

在這里擺弄。

Answer 2

試試這個Plunker： http ://plnkr.co/edit/PPaGgFJbe8QcAU80lNm5?p=preview

這樣可以使您的模式用法以Angular方式內聯。

希望這對您有用！

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：

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');
    };
});

模態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