如何将 bootstrap-modal 插件与 AngularUI Bootstrap 集成

Question

我正在将基于 jQuery 的 Web 应用程序迁移到 AngularJS。我无法将 bootstrap-modal plugin 与 AngularUI Bootstrap 集成。 bootstrap-modal 插件提供了一些我需要的功能：全宽模式、响应式设计和可堆叠模式。

我已经在plunker 上进行了将两者集成的基本尝试。请注意，当窗口宽度较小时，模态显示为全角。但是，如果您弹出 plunker 预览窗口并将窗口宽度增加到 ~979px 以上，则模态框会下降一半页面。我可以在 bootstrap-modal 源代码中看到 CSS 将模态设置为“top：50%”，但是 JS 应该根据模态高度设置负边距顶部，因此模态在中心垂直对齐的页面。 JS 没有被正确调用，因此模式向页面底部倾斜。

下面 plunker 的代码 sn-ps。

HTML：

<div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open me!</button>
    <div modal="shouldBeOpen" close="close()" options="opts">
        <div class="modal-header">
            <button type="button" ng-click="close('edit')" class="close" data-dismiss="modal">x</button>
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">{{item}}</li>
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
        </div>
    </div>
</div>

JavaScript 控制器：

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope) {

  $scope.open = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.close = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

  $scope.items = ['item1', 'item2'];

  $scope.opts = {
    backdropFade: true,
    dialogFade:true
  };

};

替代方法看起来不使用 AngularUI Bootstrap，而只是使用引导程序的常规方法在模态 HTML 中编码。我发现这个jsFiddle 在仍然使用AngularJS 的同时确实做到了这一点。如果可能的话，我更喜欢使用 AngularUI 方法。

Answer 1

查看ngEkathuwa modal service

angularjs twitter bootstrap modal not showing

Answer 2

问题在于您的 bootstrap-modal.css 响应部分：@media (max-width: 979px){...}，如果您不想要它，则通过将 (max-width 更改为min-width) 或者只是复制该部分代码并稍后在您的 html 中覆盖它。