Angularjs Bootstrap.ui Modal Not Showing

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,

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

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

<divclass="modal fade"tabindex="-1"role="dialog"><divclass="modal-dialog"><divclass="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!

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

Solution 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'
    });
    returnfalse;
};

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.

Solution 5:

For some weird reason the modal's backdrop height isn't set to fill the window, to fix this in ui-bootstrap-tpls.js i went to the template/modal/backdrop.html line at the bottom and added the following to the style options 'width':'100%', 'height':'100%'