AngularJS bootstrap.ui模式没有显示

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

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 3

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

Answer 4

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 5

由于一些奇怪的原因，模态的背景高度未设置为填充窗口，要在ui-bootstrap-tpls.js修复此问题，我转到底部的template/modal/backdrop.html行并将以下内容添加到样式中'width':'100%', 'height':'100%'

Answer 6

I upgraded to bootstrap v3.3.4 and now it works for me.

• Angularjs v1.3.12
• ui-bootstrap-0.12.0
• ui.bootstrap.tpls-0.12.0

Answer 7

在我的情况下，问题是bower正在安装bootstrap 4而ui-modal支持3.3.7所以你需要检查bower_components上的bootstrap版本