How do I integrate the bootstrap-modal plugin with AngularUI Bootstrap

Question

I'm in the process of migrating a jQuery based web application over to AngularJS. I'm having trouble integrating the bootstrap-modal plugin with AngularUI Bootstrap. The bootstrap-modal plugin offers a few features that I need: full-width modals, responsive design, and stackable modals.

I've made a basic attempt at integrating the two on plunker. Note that the modal appears to be full-width when the window width is small. But if you pop out the plunker preview window and increase the window width past ~979px, the modal drops down half the page. I can see in the bootstrap-modal source code that the CSS sets the modal to "top: 50%" but then the JS is supposed to set a negative margin-top based on the modal height so the modal gets vertically aligned in the center of the page. The JS isn't getting called properly so the modal is skewed towards the bottom of the page.

Code snippets from plunker below.

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 Controller:

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

};

The alternative approach looks to be not using AngularUI Bootstrap and just code in the modal HTML using bootstrap's normal method. I found this jsFiddle that does exactly that while still using AngularJS. I'd prefer to use the AngularUI method if possible.

Answer 1

Check ngEkathuwa modal service

angularjs twitter bootstrap modal not showing

Answer 2

The issue is with your bootstrap-modal.css responsive section: @media (max-width: 979px){...}, if you don't want it then modify it directly by changing from (max-width to min-width) or just copy that section of code and override it later in your html.