Как интегрировать bootstrap-modal плагин с AngularUI Bootstrap

Question

Я в процессе переноса веб-приложения на основе jQuery на AngularJS. У меня возникли проблемы с интеграцией bootstrap-modal plugin с AngularUI Bootstrap. Плагин bootstrap-modal предлагает несколько функций, которые мне нужны: полноразмерные модалы, отзывчивый дизайн и штабелируемые модалы.

Я сделал базовую попытку интегрировать два на plunker. Обратите внимание, что модальность оказывается полной, когда ширина окна мала. Но если вы выскочите окно предварительного просмотра плунжера и увеличьте ширину окна до ~ 979px, модальный снижается на половину страницы. Я могу видеть в исходном коде bootstrap-modal, что CSS устанавливает модальное значение «top: 50%», но тогда JS должен установить отрицательный margin-top на основе модальной высоты, чтобы модальная точка была выровнена по вертикали в центре страницы. JS не набирается должным образом, поэтому модальная перекошена в нижней части страницы.

Фрагменты кода из плункера ниже.

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, используя обычный метод Bootstrap в. Я нашел это 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.