Question

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

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

以下plunker的代码段。

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，只使用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）{...}，如果你不想要它，那么直接通过改变from（max-）来修改它width to min-width）或者只是复制该段代码并稍后在html中覆盖它。

如何将Bootstrap-modal插件与Angular UI Bootstrap集成

2 个答案: