Angular Bootstrap UI modal not showing

Question

I'm trying to use the modal from angular ui bootstrap, but it is not showing although the window is blur when the code to show the modal executes,

the codes for the modal is:

<script type="text/ng-template" id="test.html">
    <div class="modal-header">
        <h3>XXXX</h3>
    </div>

    <div class="modal-body">
        <p>XXXX</p>
    </div>

    <div class="modal-footer">
        xxxxxx
    </div>
</script>

the button to show the modal:

<div class="container-fluid" ng-controller="MainController">
    <button ng-click="showModal()" ></button>
</div>

the controller:

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/home.html'
    });
}]);

app.controller('MainController', function($scope, $rootScope, $modal) {
    $scope.showModal = function() {
        $modal.open({templateUrl:'test.html', backdrop: true,windowClass: 'modal'});  
    };
});

Is there any problem with the above codes?

code seems fine. first time using angular-ui ? have well installed the lib by including JS files ? which repository ? — Jscti
– Jscti, Commented May 22, 2014 at 8:03
manually downloaded it from here,angular-ui.github.io/bootstrap — Noor
– Noor, Commented May 22, 2014 at 8:04

Marko Kovačević · Accepted Answer · 2015-08-04 20:40:47Z

2

Mine problem was that I included both js files ( ui-bootstrap.min.js and ui-bootstrap-tpls.min.js) when i should have only loaded 'ui-bootstrap-tpls.min.js' . After that it worked like a charm.

answered Aug 4, 2015 at 20:40

Marko Kovačević

5511 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlexHv · Accepted Answer · 2014-05-22 08:30:47Z

1

I had the same issue and using :

windowClass : 'show'

in the $modal.open function did the trick.

answered May 22, 2014 at 8:30

AlexHv

1,73415 silver badges24 bronze badges

Comments

Aniket Sinha · Accepted Answer · 2014-05-22 12:26:24Z

1

AngularUI modal's documentation says

windowClass - additional CSS class(es) to be added to a modal window template

Which class is this 'modal' you are using. Is this class defined somewhere by you? Shouldn't be a issue, but try removing that.

answered May 22, 2014 at 12:26

Aniket Sinha

6,0316 gold badges39 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap UI modal not showing

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related