CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Steve
Steve

Reputation: 1577

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, 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?

Upvotes: 22

Views: 41256

Answers (7)

Muckee
Muckee

Reputation: 496

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.

Upvotes: 8

Jonathan S&#225;nchez
Jonathan S&#225;nchez

Reputation: 1

In my case the issue was that bower was installing bootstrap 4 and the ui-modal supports 3.3.7 so you need to check the version of bootstrap on bower_components

Upvotes: 0

Gustav
Gustav

Reputation: 3586

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!

Upvotes: 18

Hosar
Hosar

Reputation: 5292

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

Upvotes: 0

Daniel Barde
Daniel Barde

Reputation: 2703

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%'

Upvotes: 0

Sergio Figueiredo
Sergio Figueiredo

Reputation: 2007

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.

Upvotes: 18

artur grzesiak
artur grzesiak

Reputation: 20348

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.

Upvotes: 16

Related Questions