javascript - 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.