AngularJS bootstrap.ui modal not showing

Question

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?

Answer 1

This is a incompatibility with ui.bootstrap and bootstrap 3.0.

You only need to put in your css:

.modal {
display: block;
}

You can see this post for more detail: AngularJs with UI-Bootstrap: Fix broken dialog boxes.

Answer 2

The problem for me (developing with visual studio using bootstrap 4) was that the bootstrap class .fade:not(.show) defines opacity: 0. Using code inspector to disable this class, I could see that the modal would show.

However, in order to avoid modifying vendor files (namely, the bootstrap.css file), I simply extended the function that calls the modal to add the 'show' class to the modal page. In your example, this would be as follows:

$scope.showPrivacy = function() {
    $modal.open({
        templateUrl: '/Privacy',
        windowClass: 'show',
        controller: 'PrivacyInstanceController'
    });
    return false;
};

Normally, adding the show class to the entire window would mean that the modal is displayed continuously. This is not an issue when pages are loaded dynamically because the entire element with the .show class is removed when the user clicks away from the modal, irrespective of the existence of this class.

Answer 3

I had the exact same issue. What I did to fix it was to change what i had in my template.html, the .html provided with the templateUrl property in the open-function.

I had the full modal-markup there:

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">And here some modal markup</div></div></div>

When I removed the first three divs and only had And here some modal markup left in the template.html it worked fine!

Answer 4

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.

1. 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.
2. 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 yourbootstrap.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.