AngularJS bootstrap.ui modal not showing

angularjs, javascript, twitter-bootstrap

Solution

Have exactly the same symptoms while ago. Do not remember the exact details, but I think the main problem was that the instance of the modal has always `display:none`.

- Make sure that you are using the `ui-bootstrap` with templates (`ui-bootstrap-tpls.js`) -- as there is the effect of graying-out you probably do.

- In `ui-bootstrap-tpls.js` go to the `modal` template at the very bottom (you can find it by: "template/modal/window.html") and add there `style="display:block". If it will not help try to match css classes of the template against your`bootstrap.css`.

I personally used some custom version of `bootstrap3`, and now have got these as template:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/backdrop.html",
    "<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" style='display:block;z-index:1050'  ng-transclude></div>");
}]);

EDIT You can easily remove from your `bootstrap.css` all styles in class `modal` (and its sub-classes) where `display` is set to `none` -- `bootstrap` just hides the DOM element, whereas `ui-bootstrap` removes it completely.

Problem

I am trying to display a modal dialog using AngularJS bootstrap.ui. When I do a $modal.open(...) the screen grays out and the html from my templateUrl get called from the server, but no modal displays. When I click on the gray area, the modal "closes", that is the gray area goes away and the screen looks normal again. I cannot figure out why I don't see any modal screen. I am trying to follow this tutorial: Angular directives I am using Visual Studio 2013, MVC 5, AngularJS 1.2.2. I am using bootstrap.css that comes with the VS project. It has the modal classes in it. I am getting no error reported from the Javascript console. My app is defined as follows: ``` var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ... blogApp.controller('blogController', function blogController($scope, $modal, $log, blogData, userData) { ... $scope.showPrivacy = function() { $modal.open({ templateUrl: '/Privacy', controller: 'PrivacyInstanceController' }); return false; }; }); var PrivacyInstanceController = function($scope, $modalInstance) { $scope.close = function() { $modalInstance.close(); }; } ``` And my markup is: ``` <div ng-controller="blogController"> <a ng-click="showPrivacy()">Privacy Policy</a> </div> ``` Any idea why my screen is graying out, the /Privacy resource is getting loaded and the screen returns to normal when the gray is clicked, but no modal appears?

Original source